安卓浏览器看背景图片有些设备会模糊
可以使用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