移动端的兼容问题

178 阅读2分钟

安卓浏览器看背景图片有些设备会模糊

可以使用2x的背景图来代替img标签(一般情况下都是2倍的)或者指定background-size:contain

非可点击元素如(label,span)监听click事件部分ios版本下不会触发

可以用css增加cursor:pointer

input为fixed定位,在ios下input固定定位在顶部或者底部,在页面滚动一些距离后,点击input(弹出键盘),input位置会出现在中间位置

可以让内容列表框也是fixed定位,这样不会出现fixed错位的问题

移动端字体小于12px使用四周边框或者背景色块,部分安卓文字偏上bug问题。

可以使用整体放大1倍(width、height、font-size)再使用transform缩放,使用canvas在移动端会模糊也需要这样的解决方案

在移动端图片上传图片兼容低端机的问题。

input 加入属性 accept="image/*" multiple

在h5嵌入app中,ios如果出现垂直滚动条时,手指滑动页面滚动之后,滚动很快停下来,好像踩着刹车在开车,有“滚动很吃力”的感觉。

/* 对webview设置了更低的“减速率” */
self.webView.scrollView.decelerationRate = UIScrollViewDecelerationRateNormal;

在安卓机上placeholder文字设置行高会偏上

input有placeholder情况下不要设置行高

overflow:scroll,或者auto在iOS上滑动卡顿的问题

加入-webkit-overflow-scrolling:touch

移动端适配可以使用lib-flexible ,使用rem来布局移动端有一个问题就是px的小数点的问题,不同的手机对于小数点处理方式不一样,有些是四舍五入,有些直接舍去掉,因此在自动生成雪碧图时候图标四周适当留2px的空间,防止图标被裁剪掉

不让 Android 手机识别邮箱

<meta content="email=no" name="format-detection" />

禁止 iOS 识别长串数字为电话

<meta content="telephone=no" name="format-detection" />

禁止 iOS 弹出默认的各种操作窗口, 在iOS上,当你触摸并按住触摸的目标,比如一个链接,Safari浏览器将显示链接有关的系统默认菜单。这个属性可以让你禁用系统默认菜单。适用于链接元素比如新窗口打开,img元素比如保存图像等等

-webkit-touch-callout:none