安卓浏览器看背景图片，有些设备会模糊。 用同等比例的图片在PC机上很清楚，但是手机上很模糊，原因是什么呢？经过研究，是devicePixelRatio作怪，因为手机分辨率太小，如果按照分辨率来显示网页，这样字会非常小，所以苹果当初就把iPhone 4的960640分辨率，在网页里只显示了480320，这样devicePixelRatio＝2。现在android比较乱，有1.5的，有2的也有3的。
想让图片在手机里显示更为清晰，必须使用2x的背景图来代替img标签（一般情况都是用2倍）。例如一个div的宽高是100 * 100，背景图必须得200*200，然后background-size:contain;，这样显示出来的图片就比较清晰了。\
防止手机中网页放大和缩小。
这点是最基本的，最为手机网站开发者来说应该都知道的，就是设置meta中的viewport
设置了DTD的方式是XHTML的写法，假如我们页面运用的是html5，可以不用设置DTD,直接声明。 使用viewport使页面禁止缩放。 通常把user-scalable设置为0来关闭用户对页面视图缩放的行为。 但是为了更好的兼容，我们会使用完整的viewport设置。 代码如下:
当然，user-scalable=0,有的人也写成user-scalable=no，都可以的。
ios和android下触摸元素时出现半透明灰色遮罩
Element {
-webkit-tap-highlight-color:rgba(255,255,255,0)
}
设置alpha值为0就可以去除半透明灰色遮罩，备注：transparent的属性值在android下无效。
ctive兼容处理 即 伪类 :active 失效
方法一：body添加ontouchstart
方法二：js给 document 绑定 touchstart 或 touchend 事件
a {
color:#000;
}
a:active {
color:#fff;
}
[bar]()
document.addEventListener('touchstart',function(){},false);
复制代码
手机上的多行省略
.overflow-hidden{
display: box !important;
display: -webkit-box !important;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;/*第几行出现省略号*/
/*text-align:justify;不能和溢出隐藏的代码一起写，会有bug*/
}
某些安卓手机的自带浏览器不识别onkeydown onkeypress onkeyup事件，这些事件会导致不能输入汉字
IOS手机中如果出现一个元素的层级非常高可还是被别的元素遮盖的，那么就将该元素与别的元素同级苹果手机固定定位有bug 检查html和body是不是设置了overflow-x:hidden;
button /button元素一定要写上type属性不然会默认提交表单，出现想不到的bug
html5调用安卓或者ios的拨号功能
html5提供了自动调用拨号的标签，只要在a标签的href中添加tel:就可以了。如下：400-810-6999 转 1034拨打手机直接如下:点击拨打15677776767
上下拉动滚动条时卡顿、慢
body {-webkit-overflow-scrolling:
touch;overflow-scrolling: touch;}
Android3+和iOS5+支持CSS3的新属性为overflow-scrolling
禁止复制、选中文本
Element {-webkit-user-select:none;
-moz-user-select:none;
-khtml-user-select:none;
user-select:none;
}
解决移动设备可选中页面文本(视产品需要而定)
iphone及ipad下输入框默认内阴影
Element{
-webkit-appearance:none;
}
1、ios下input为type=button属性disabled设置true,会出现样式文字和背景异常问题。
解决方案:使用opacity=1来解决
对非可点击元素如(label,span)监听click事件，部分ios版本下不会触发。
解决方案:css增加cursor:pointer就搞定了
3、移动端1px边框
解决方案：比如按钮的box的class为btn
.btn:before{
content:'';
position: absolute;
top: 0;
left: 0;
border: 1px solid #ccc;
width: 200%;
height: 200%;
box-sizing:border-box;
-webkit-box-sizing:border-box;
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin: left top;
transform-origin: left top;
}
4、input为fixed定位，在ios下input固定定位在顶部或者底部，在页面滚动一些距离后，点击input(弹出键盘)，input位置会出现在中间位置。
解决方案:内容列表框也是fixed定位,这样不会出现fixed错位的问题
5、移动端字体小于12px使用四周边框或者背景色块，部分安卓文字偏上bug问题。
解决方案:可以使用整体放大1倍(width、height、font-size等等)再使用transform缩放,使用canvas在移动端会模糊也需要这样的解决方案
6、在移动端图片上传图片兼容低端机的问题。
解决方案:
input 加入属性 accept="image/*" multiple
7、在h5嵌入app中，ios如果出现垂直滚动条时，手指滑动页面滚动之后，滚动很快停下来，好像踩着刹车在开车，有“滚动很吃力”的感觉。
解决方案:
self.webView.scrollView.decelerationRate = UIScrollViewDecelerationRateNormal;对webview设置了更低的“减速率”
8、移动端click 300ms 延时响应
解决方案:使用 Fastclick
zepto的touch模块，tap事件也是为了解决click的延迟问题
触摸事件的响应顺序为 touchstart --> touchmove --> touchend --> click,也可以通过绑定ontouchstart事件，加快对事件的响应，解决300ms延迟问题
window.addEventListener( "load", function() {
FastClick.attach( document.body );
}, false );
**这个300ms的延时会引发另外一个问题---点击穿透**
点击穿透的原因:
1.浏览器有300ms的延时为了区别是double click还是缩放
2.移动端事件的响应顺序 touchstart -> touchmove -> touchend -> tap -> click
在300ms时间范围内,上层元素隐藏了或移开了,下层相同位置的元素触发了click事件(普通元素是click事件回调函数效果,input，select是focus事件,超链接是页面跳转)
解决方案是：
方案一: 下层元素本身无click事件,没有input select a标签,统一使用touch事件
方案二：下层元素本身无click事件,在上方元素的touchend事件回调函数中,阻止后续触发默认事件 e.preventDefault();
1 $("#cbFinish").on("touchend", function (event) {
2 //很多处理比如隐藏什么的
3 event.preventDefault();
4 });
方案三：延迟一定的时间(300ms+)来处理事件
1 $("#cbFinish").on("tap", function (event) {
2 setTimeout(function(){
3 //很多处理比如隐藏什么的
4 },320);
5 });
**方案四：在上层显示以后加入对应的class名控制，截断显示层下方可获取焦点元素的事件获取**
9、在安卓机上placeholder文字设置行高会偏上
解决方案:input有placeholder情况下不要设置行高
10、overflow:scroll，或者auto在iOS上滑动卡顿的问题
解决方案:加入-webkit-overflow-scrolling:touch
11、移动端适配可以使用lib-flexible ，使用rem来布局移动端有一个问题就是px的小数点的问题，不同的手机对于小数点处理方式不一样，有些是四舍五入，有些直接舍去掉，因此在自动生成雪碧图时候图标四周适当留2px的空间，防止图标被裁剪掉
12、iphonex的适配的解决方案
<meta name="viewport" content="...,viewport-fit=cover" />
body{
padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
<meta name="viewport" content="...,viewport-fit=cover" />
body{
padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
13.不让 Android 手机识别邮箱
<meta content="email=no" name="format-detection" />
14.禁止 iOS 识别长串数字为电话
<meta content="telephone=no" name="format-detection" />
15.禁止 iOS 弹出默认的各种操作窗口， 在iOS上，当你触摸并按住触摸的目标，比如一个链接，Safari浏览器将显示链接有关的系统默认菜单。这个属性可以让你禁用系统默认菜单。适用于链接元素比如新窗口打开，img元素比如保存图像等等
-webkit-touch-callout:none
16.消除 transition 闪屏
-webkit-transform-style: preserve-3d; /*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/
-webkit-backface-visibility: hidden; /*(设置进行转换的元素的背面在面对用户时是否可见：隐藏)*/
17.iOS 系统中文输入法输入英文时，字母之间可能会出现一个六分之一空格
// 可以通过正则去掉
this.value = this.value.replace(/\u2006/g, '');
18.禁止ios和android用户选中文字
-webkit-user-select:none
19.在ios和andriod中,audio元素和video元素在无法自动播放
应对方案：触屏即播
$('html').one('touchstart',function(){
audio.play()
})
20.ios下取消input在输入的时候英文首字母的默认大写
<input autocapitalize="off" autocorrect="off" />
21.android下取消输入语音按钮
input::-webkit-input-speech-button {display: none}
22 CSS动画页面闪白,动画卡顿
解决方法: 1.尽可能地使用合成属性transform和opacity来设计CSS3动画，不使用position的left和top来定位 2.开启硬件加速
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
23.阻止旋转屏幕时自动调整字体大小
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
-webkit-text-size-adjust:none;
}
24. Input 的placeholder会出现文本位置偏上的情况
input 的placeholder会出现文本位置偏上的情况：PC端设置line-height等于height能够对齐，而移动端仍然是偏上，解决是设置line-height：normal
25 往返缓存问题
点击浏览器的回退，有时候不会自动执行js，特别是在mobilesafari中。这与往返缓存(bfcache) 有关系。 解决方法 ：
window.onunload = function(){};
26 在移动端修改难看的点击的高亮效果，iOS和安卓下都有效：
- {-webkit-tap-highlight-color:rgba(0,0,0,0);} 不过这个方法在现在的安卓浏览器下，只能去掉那个橙色的背景色，点击产生的高亮边框还是没有去掉，有待解决！
有一个CSS3的属性，加上后，所关联的元素的事件监听都会失效，等于让元素变得“看得见，点不着”。IE到11才开始支持，其他浏览器的当前版本基本都支持。详细介绍见这里，可以解决点击难看的高亮效果。 pointer-events: none;
27. user-select:none;造成iPhone5上输入框的光标不显示，输入时如果不显示光标，那将无法看到输入位置。因此这个属性不能用在input元素上
28. IOS手机，在react框架中，输入框输入内容添加去除空白逻辑，会造成中文拼音输入法，未及时选择中文，输入框出现许多拼音字母。还有maxLength属性，输入时不限制长度，输入结束才会自动截短。
<input maxLength={20} value={taskName} onChange={(e) => this.setState({ taskName: e.target.value.replace(/\s*/g, '') })} placeholder="请输入，20个字符以内" />
29. 华为手机，输入文字弹出键盘，键盘收缩回去之后。页面的高度不会复原成真正的100vh,而仍停留在有键盘弹出时的高度，如果页面设置了全屏背景，就会出现页面有一部分没有背景。解决方法是监听window.onresize事件，手动恢复页面高度
30. 解决iphone下选中input页面自动放大的问题，viewport的user-scalable要设置成no
<meta name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,viewport-fit=cove
