移动端常见bug

转载 (原文地址) szp1203 随笔 移动端 415阅读 2018-07-16 13:12:40 举报

移动端常见bug整理
原文链接

点击样式闪动

Q: 当你点击一个链接或者通过Javascript定义的可点击元素的时候,它就会出现一个半透明的灰色背景。
A:根本原因是-webkit-tap-highlight-color,这个属性是用于设定元素在移动设备(如Adnroid、iOS)上被触发点击事件时,响应的背景框的颜色。建议写在样式初始化中以避免所以问题:div,input(selector) {-webkit-tap-highlight-color: rgba(0,0,0,0);}另外出现蓝色边框:outline:none;

屏蔽用户选择

Q: 禁止用户选择页面中的文字或者图片
A:代码如下

移动端如何清除输入框内阴影

Q: 在iOS上,输入框默认有内部阴影,但无法使用 box-shadow 来清除,如果不需要阴影,可以这样关闭:
A:代码如下

禁止文本缩放

Q: 禁止文本缩放
A:代码如下

如何禁止保存或拷贝图像

Q: 如何禁止保存或拷贝图像
A:代码如下

解决字体在移动端比例缩小后出现锯齿的问题

Q: 解决字体在移动端比例缩小后出现锯齿的问题
A:代码如下

设置input里面placeholder字体的大小

Q: 设置input里面placeholder字体的大小
A:代码如下

audio元素和video元素在ios和andriod中无法自动播放

Q: audio元素和video元素在ios和andriod中无法自动播放
A:代码如下,触屏及播放

手机拍照和上传图片

Q: 针对file类型增加不同的accept字段
A:代码如下

输入框自动填充颜色

Q: 针对input标签已经输入过的,会针对曾经输入的内容填充黄色背景,这是webkit内核自动添加的,对应的属性是autocomplete,默认是on,另对应的样式是input:-webkit-autofill 且是不可更改的。
A:方案如下 1 设置标签的autocomplete="off",亲测无效可能 2 设置盒子的内阴影为你常态的颜色(下面以白色为例)

开启硬件加速

Q: 优化渲染性能
A:代码如下

用户设置字号放大或者缩小导致页面布局错误

移动端去除type为number的箭头

实现横屏竖屏的方案

css 用 css3媒体查询,缺点是宽度和高度不好控制

js 判断屏幕的方向或者resize事件

评论 ( 1 )
最新评论
lawrence 2018-07-17 21:17:33 1F

-webkit-text-size-adjust只能针对webkit核心,对其他浏览器没用

楼主做的web apk,还是web app呢?