阅读 768

移动端兼容性问题

1. overflow: auto; IOS手机滚动卡顿

-webkit-overflow-scrolling: touch; //有回弹效果 
复制代码

2. 动画定义3D启用硬件加速

3. 盒子边框最低只能是1px

4. a标签或者button标签等,点击后会有蓝色边框;去掉难看的点击的高亮效果

* {
  outline: none;
  -webkit-tap-highlight-color:rgba(0,0,0,0);
}
复制代码

5. calc的兼容性处理

CSS3中的calc变量在iOS6浏览器中必须加-webkit-前缀,目前的FF浏览器已经无需-moz-前缀。
Android浏览器目前仍然不支持calc,所以移动端不建议使用calc
复制代码

6. 微信浏览器中跳转新网页:window.locaition.href 无效;

var nextPage = document.createElement("a");
     nextPage.setAttribute('href','http://www.baidu.com');
     nextPage.click();
复制代码

7. 移动端点击300ms延迟

8. 移动端 HTML5 audio autoplay 失效问题

这个不是 BUG,由于自动播放网页中的音频或视频,会给用户带来一些困扰或者不必要的流量消耗,所以苹果系统和安卓系统通常都会禁止自动播放和使用 JS 的触发播放,必须由用户来触发才可以播放。

9. 禁止ios和android用户选中文字;禁止ios 长按时不触发系统的菜单,禁止ios&android长按时下载图片

div {
  -webkit-user-select:none;
  -webkit-touch-callout: none
}
复制代码

10. ios下取消input在输入的时候英文首字母的默认大写

<input autocapitalize="off" autocorrect="off" />
复制代码
关注下面的标签,发现更多相似文章
评论