移动端兼容性问题

① 安卓浏览器看背景图片，有些设备会模糊，原因是手机的分辨率太小

解决方案：用2X图片来代替img标签，然后background-size: contain

② 防止手机中页面放大或缩小：在meta中设置viewport user-scalable = no

③ 上下拉滚动条卡顿： overflow-scrolling: touch;

④ 禁止复制选中文本： user-select: none;

⑤ 长时间按住页面出现闪退：-webkit-touch-callout: none;

⑥ 动画定义3D硬件加速： transform: translate 3d(0,0,0);

⑦ formate-detection 启动或禁止自动识别页面中的电话号码，content = "yes/no"

⑧ a标签添加tel是拨号功能

⑨ 安卓手机的圆角失效： background-clip: padding-box;

⑩ 手机端300ms延迟： fastclick

① 横平时字体加粗不一致： text-size-adjust: 100%;

JS部分

ios系统下单击事件有300ms的延时

出现这个问题，是由于ios系统下有一个默认的双击放大页面(double tap to zoom)的方案，因此在检测到第一个用户tap事件后，会hold一段时间，若在此时间内又检测到新的tap，则判断为双击事件，反之则判断为单击事件，而这个延迟的时间就是300ms左右。

解决方案：FastClick 是 FT Labs 专门为解决移动端浏览器 300 毫秒点击延迟问题所开发的一个轻量级的库。FastClick的实现原理是在检测到touchend事件的时候，会通过DOM自定义事件立即出发模拟一个click事件，并把浏览器在300ms之后的click事件阻止掉。

css部分

meta标签

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
关于 initial-scale=1 ，这个参照iphone5的尺寸320*568，如果你页面按照640*1136做的话，scale就设为0.5

<meta content="yes" name="apple-mobile-web-app-capable"> IOS中safari允许全屏浏览

<meta content="black" name="apple-mobile-web-app-status-bar-style"> IOS中Safari顶端状态条样式

<meta content="telephone=no" name="format-detection"> 忽略将数字变为电话号码

<meta content="email=no" name="format-detection"> 忽略识别email
去除webkit的滚动条

element::-webkit-scrollbar{

display: none;

}
去除button在ios上的默认样式

-webkit-appearance: none;

border-radius: 0
不想让按钮touch时有蓝色的边框 -webkit-tap-highlight-color:rgba(0,0,0,0);
使用图片时，会发现图片下总是有大概4px的空白，（原因据说图片是inline，触发baseline什么的。。。）常用解决方法有

img{display:block}；

img{vertical-align:top}也可取其他几个值，视情况而定

其他解决办法
在iOS中，当你点击比如 input 准备输入时，虚拟键盘弹出，整个视窗的高度就会变为减去键盘的高度，加入你在底部有fixed的元素比如btn，这个元素就会跑上来，一般都不会太美观。我是当focus时就把它设为absolute，视情况而定
禁止用户选中文字 -webkit-user-select:none
做一个方向箭头比如 “>” 时，可以用一个正方形的div，设置border:1px 1px 0 0；然后rotate(45deg)
使用rem时，设某个div比如的height:3rem;line-height:1.5rem;overflow:hidden;时，在某些android手机上可能会出现显示不止两行,第三行会显示点头部。解决：利用js获取文字line-height再去设置div高度

meta标签

H5页面窗口自动调整到设备宽度，并禁止用户缩放页面

（部分安卓手机的UC浏览器写完以后还是可以放大缩小）

忽略将页面中的数字识别为电话号码

webkit表单元素的默认外观怎么重置

.css{-webkit-appearance:none;} （ios上的下拉框会有圆角，所以要写border-radius:0）

在input框获得焦点时文字被清空用value 在input框输入文字时被清空用placeholder

webkit表单输入框placeholder的文字能换行么？ios可以，android不行~,在textarea标签下都可以换行~

html,body{

overflow: hidden;/*手机上写overflow-x:hidden;会有兼容性问题，直接子级如果是绝对定位有运动到屏幕外的话ios7系统会出现留白*/

-webkit-overflow-scrolling:touch;/*流畅滚动,ios7下会有滑一下滑不动的情况，所以需要写上*/

position:realtive;/*直接子级如果是绝对定位有运动到屏幕外的话，会出现留白*/

}

webkit表单输入框placeholder的颜色值

input::-webkit-input-placeholder{color:#999;}

input:focus::-webkit-input-placeholder{color:#999;}

文本标签line-height：1或者是line-height等于height文字会被切掉

手机上浮动元素能写宽尽量写宽不然很容易出现兼容性问题,尽量不要写高，因为内容多少不固定

给不同屏幕大小的手机设置特殊样式

@media only screen and (min-device-width : 320px) and (max-device-width : 375px){}

弹层的关闭事件容易触发弹层关闭后下一层的事件所以要给弹层关闭事件加上event.preventDefault()

弹层弹出后不允许屏幕滚动给弹层加mousemove事件event.preventDefault()

IOS手机中如果出现一个元素的层级非常高可还是被别的元素遮盖的，那么就将该元素与别的元素同级

posted @ 2019-06-27 15:37 一粒一世界阅读(500) 评论(0) 编辑收藏举报

刷新页面返回顶部

一粒一世界

移动端兼容性问题

ios系统下单击事件有300ms的延时

css部分

公告