We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
在移动端开发过程中，会遇到一些细节问题，在手机端展示会有一些问题，下面是一些总结：
user-scalable
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
2.启动或禁用自动识别页面中的电话号码，默认是开始的，如果想禁用
<meta name="format-detection" content="telephone=no"/>
3.拨打手机号
<a href="tel:13023232323">点击拨打 XXX</a>
4.上下拉动滚动条时卡顿、慢
body { -webkit-overflow-scrolling: touch; overflow-scrolling: touch; }
5.禁止复制、选中文本
element { -webkit-user-select: none; -moz-user-select: none; -khtml-user-select: none; user-select: none; }
6.长时间按住页面出现闪退
element { -webkit-touch-callout: none; }
7.输入框内阴影
element { -webkit-appearance: none; }
8.触摸元素时出现半透明灰色遮罩
element { -webkit-tap-highlight-color: rgba(255,255,255,0); }
9.active兼容性处理，在部分手机端伪类:active失效
:active
<body ontouchstart=""></body>
10.动画定义3D 启用硬件加速，但是会消耗更多的内存与功耗
element { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }
11.retina 屏的1px 边框
element { border-width: thin; }
12.旋转屏幕时，字体大小调整的问题
*{ -webkit-text-size-adjust: 100%; }
13.transition 闪屏
设置内嵌的元素在3d空间如何呈现，保留3D -webkit-transform-style: preserve-3d; 设置进行转换的元素的背面在面对用户是是否可见/隐藏 -webkit-backface-visibility: hidden;
14.圆角 bug
某些 Android 手机圆角失效 background-clip: padding-box;
15.顶部状态栏背景色
<meta name="apple-mobile-web-app-status-bar-style" content="black">
说明：
除非你先使用apple-mobile-web-app-capable指定全屏模式，否则这个meta标签不会起任何作用。
如果content设置为default，则状态栏正常显示。如果设置为blank，则状态栏会有一个黑色的背景。如果设置为blank-translucent，则状态栏显示为黑色半透明。如果设置为default或blank，则页面显示在状态栏的下方，即状态栏占据上方部分，页面占据下方部分，二者没有遮挡对方或被遮挡。如果设置为blank-translucent，则页面会充满屏幕，其中页面顶部会被状态栏遮盖住（会覆盖页面20px高度，而iphone4和itouch4的Retina屏幕为40px）。默认值是default。
16.设置缓存
<meta http-equiv="Cache-Control" content="no-cache"> 手机页面通常在第一次加载后会进行缓存，然后每次刷新会使用缓存而不是去重新向服务器发送请求。如果不希望使用缓存可以设置no-cache。
17.IOS键盘字母输入，默认首字母大写，解决方案
<input type="text" autocapitalize="off">
iOS 输入时会自动修正，解决方案：
<input type="text" autocorrect="off"/>
18.select 下拉选择设置右对齐
select option { direction: rtl; }
19.通过transform进行skew变形，rotate旋转会造成出现锯齿现象
-webkit-transform: rotate(-4deg) skew(10deg) translateZ(0); transform: rotate(-4deg) skew(10deg) translateZ(0); outline: 1px solid rgba(255,255,255,0);
20.移动端点击300ms 延迟
解决方案： 移动端使用 tap 事件来取代 click 事件 使用两个 js fastclick.js tap.js
21.移动端点透问题 例如
<div id="mask">这是蒙层</div> <a>这是一个链接</a> $('#mask').onclick(function(){ this.hide(); });
当我们点击上面的蒙层时，如果点击的位置刚好是 a 链接，这个时候在蒙层消失的时候，也会触发 a 链接，这就是点透的问题
原因：
touchstart 早于 touchend 早于 click，click 的触发是有延迟的，这个时间大概在300ms 左右，也就是我们 tap 触发之后蒙层隐藏，此时 click 还没触发，300ms 之后由于蒙层隐藏，我们的click 触发到了下面的 a 链接。
解决方案： a.尽量使用 touch 事件代替 click 事件，使用 touchend事件 b.用fastclick 事件 c.用 preventDefault 阻止 a 标签的 click d.延迟一定时间来处理事件（不推荐）
$('#mask').on('touchend', function(){ event.preventDefault(); });
22.在 iOS 系统中，中文输入法输入英文时，字母之间可能会出现一个六分之一的空格，解决方案，可以使用正则去掉
this.value = this.value.replace(/\u2006/g,'');
23.移动端 HTML5中 audio 的 autoplay 会失效 苹果系统和安卓系统会禁止视频自动播放
document.addEventListener('touchstart', function(){ $('#play').play(); $('#play').pause(); });
24.部分机型存在 type=search 的 input 会自带close 按钮样式修改方法 有些机型的搜索input控件会自带close按钮（一个伪元素），而通常为了兼容所有浏览器，我们会自己实现一个，此时去掉原生close按钮的方法为
#Search::-webkit-search-cancel-button{ display: none; }
25.改变 placeholder 的默认颜色
input::-webkit-input-placeholder{color: #aaa}; input:focus::-webkit-input-placeholder{color: #ddd};
26.移动端，在点击input输入内容的时候，这时候会有一个灰色的背景层，该如何去掉呢？ 这样就可以了
-webkit-tap-highlight-color:rgba(0,0,0,0);
27.移动端点击a链接时会有一个蓝色的背景，如何取消呢
a { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-user-select: none; -moz-user-focus: none; -moz-user-select: none; }
The text was updated successfully, but these errors were encountered:
参考链接
Sorry, something went wrong.
No branches or pull requests
在移动端开发过程中，会遇到一些细节问题，在手机端展示会有一些问题，下面是一些总结：
user-scalable设置为0来关闭用户对页面视图缩放的行为2.启动或禁用自动识别页面中的电话号码，默认是开始的，如果想禁用
3.拨打手机号
4.上下拉动滚动条时卡顿、慢
5.禁止复制、选中文本
6.长时间按住页面出现闪退
7.输入框内阴影
8.触摸元素时出现半透明灰色遮罩
9.active兼容性处理，在部分手机端伪类
:active失效10.动画定义3D 启用硬件加速，但是会消耗更多的内存与功耗
11.retina 屏的1px 边框
12.旋转屏幕时，字体大小调整的问题
13.transition 闪屏
14.圆角 bug
15.顶部状态栏背景色
说明：
除非你先使用apple-mobile-web-app-capable指定全屏模式，否则这个meta标签不会起任何作用。
如果content设置为default，则状态栏正常显示。如果设置为blank，则状态栏会有一个黑色的背景。如果设置为blank-translucent，则状态栏显示为黑色半透明。如果设置为default或blank，则页面显示在状态栏的下方，即状态栏占据上方部分，页面占据下方部分，二者没有遮挡对方或被遮挡。如果设置为blank-translucent，则页面会充满屏幕，其中页面顶部会被状态栏遮盖住（会覆盖页面20px高度，而iphone4和itouch4的Retina屏幕为40px）。默认值是default。
16.设置缓存
17.IOS键盘字母输入，默认首字母大写，解决方案
iOS 输入时会自动修正，解决方案：
18.select 下拉选择设置右对齐
19.通过transform进行skew变形，rotate旋转会造成出现锯齿现象
20.移动端点击300ms 延迟
解决方案：
移动端使用 tap 事件来取代 click 事件
使用两个 js
fastclick.js tap.js
21.移动端点透问题
例如
当我们点击上面的蒙层时，如果点击的位置刚好是 a 链接，这个时候在蒙层消失的时候，也会触发 a 链接，这就是点透的问题
原因：
touchstart 早于 touchend 早于 click，click 的触发是有延迟的，这个时间大概在300ms 左右，也就是我们 tap 触发之后蒙层隐藏，此时 click 还没触发，300ms 之后由于蒙层隐藏，我们的click 触发到了下面的 a 链接。
解决方案：
a.尽量使用 touch 事件代替 click 事件，使用 touchend事件
b.用fastclick 事件
c.用 preventDefault 阻止 a 标签的 click
d.延迟一定时间来处理事件（不推荐）
22.在 iOS 系统中，中文输入法输入英文时，字母之间可能会出现一个六分之一的空格，解决方案，可以使用正则去掉
23.移动端 HTML5中 audio 的 autoplay 会失效
苹果系统和安卓系统会禁止视频自动播放
24.部分机型存在 type=search 的 input 会自带close 按钮样式修改方法
有些机型的搜索input控件会自带close按钮（一个伪元素），而通常为了兼容所有浏览器，我们会自己实现一个，此时去掉原生close按钮的方法为
25.改变 placeholder 的默认颜色
26.移动端，在点击input输入内容的时候，这时候会有一个灰色的背景层，该如何去掉呢？
这样就可以了
27.移动端点击a链接时会有一个蓝色的背景，如何取消呢
The text was updated successfully, but these errors were encountered: