移动web开发都会遇到的坑(会持续更新)
1、自适应第一招
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
如果你发现自己做的网页不能适配,看看是不是遗漏的这行代码,initial-scale控制页面的初始化缩放比,user-scalable控制网页是否允许缩放。
2、IOS允许全屏浏览
<meta content=”yes” name=”apple-mobile-web-app-capable” />
3、忽略数字是电话号码
<meta content=”telephone=no” name=”format-detection” />
4、去除Android对邮箱地址的识别
<meta content=”email=no” name=”format-detection” />
5、去除URL控件条
setTimeout(scrollTo,0,0,0);
6、禁止旋转设备
No way,IOS和Android在浏览器里面没法禁止浏览器旋转。
7、关闭IOS键盘自动大写
我们知道在iOS中,当虚拟键盘弹出时,默认情况下键盘是开启首字母大写的功能的,根据某些业务场景,可能我们需要关闭这个功能,移动版本webkit为 input元素提供了autocapitalize属性,通过指定autocapitalize=”off”来关闭键盘默认首字母大写。
8、iOS中如何彻底禁止用户在新窗口打开页面
-webkit-touch-callout:none;
9、IOS禁止用户复制或者保存图片
-webkit-touch-callout:none;
10、IOS禁止选中文字
-webkit-user-select:none
11、IOS获取滚动条高度
桌面浏览器中想要获取滚动条的值是通过document.scrollTop和document.scrollLeft得到的,但在iOS中你会发现这两 个属性是未定义的,为什么呢?因为在iOS中没有滚动条的概念,在Android中通过这两个属性可以正常获取到滚动条的值,那么在iOS中我们该如何获 取滚动条的值呢?
通过window.scrollY和window.scrollX我们可以得到当前窗口的y轴和x轴滚动条的值。
12、解决边框溢出
width:100%;
-webkit-box-sizing:border-box;
13、输入框获取焦点后默认弹出数字键盘
<input type="tel" placeholder=""/>
记得使用type="tel",而不是type="number"
14、input type="number"去除上下箭头
chrome下:
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{
-webkit-appearance: none !important;
margin: 0;
}
firefox下:
input[type="number"]{-moz-appearance:textfield;}
15、input type="password"自动弹出数字键盘
<input type="password" pattern="[0-9]*" maxlength="6" inputmode="numeric" name="password">
15、a标签出现蓝色边框
*{ -webkit-tap-highlight-color: transparent;
-webkit-appearance: none;
}
15、手机调用摄像头或照片
<input type="file" accept="image/*" capture="camera">
16、手机键盘删除键不会触发keyup的问题
可以使用oninput事件
17、文本框placeholder颜色
textarea::-webkit-input-placeholder,input::-webkit-input-placeholder{
font-size: inherit;
color: #ccc;
}
18、数字文本框显示密码样式
<input type="tel" pattern="[0-9]*" inputmode="numeric">
input[type=tel] {
-webkit-text-security: disc;
}
最新文章
- Android JNI 本地开发接口
- CSS3学习之分享下transition属性
- Xilinx FPGA全局时钟和全局时钟资源的使用方法
- android-----test------模拟来电提醒和短信提醒
- STM32串口USART1的使用方法
- Android 实现Path2.0中绚丽的的旋转菜单
- WCF学习笔记(一):WCF简介
- javascript 动态操作Html
- hdu4126(最小生成树+dfs)
- 怎样将IPhone应用程序软件公布到应用程序商店?
- Raspberry树莓派学习笔记1—基本介绍
- 算法工程师<;编程题>;
- windows10计划任务启动bat执行jar打包的jar文件
- iOS开发基础-九宫格坐标(2)之模型
- java 面试题2
- 只有 assignment、call、increment、decrement 和 new 对象表达式可用作语句
- .Net分布式锁
- 【LeetCode】21.合并两个有序链表
- ThinkPHP5 隐藏index.php问题
- 【spark 深入学习 05】RDD编程之旅基础篇-01
热门文章
- HTML-★★★★JavaScript的DOM操作★★★★-重点部分
- ubuntu 报错 libcublas.so.8.0
- java集合线程安全测试
- 实验三敏捷开发与XP实践《Java开发环境的熟悉》实验报告
- python学习,day1作业:设计一个三级菜单
- 进阶篇:2.1)DFMA实施障碍和关键
- js面向对象(一)——封装
- php中die(),exit(),return的区别
- 在循环中使用break案例
- SystemVerilog中枚举类型注意事项