移动web端常见bug

本文是摘录整理了移动端常见的一些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媒体查询，缺点是宽度和高度不好控制

@media screen and (orientation: portrait) {    .main {        -webkit-transform:rotate(-90deg);        -moz-transform: rotate(-90deg);        -ms-transform: rotate(-90deg);        transform: rotate(-90deg);        width: 100vh;        height: 100vh;        /*去掉overflow 微信显示正常，但是浏览器有问题，竖屏时强制横屏缩小*/        overflow: hidden;    } }  @media screen and (orientation: landscape) {    .main {        -webkit-transform:rotate(0);        -moz-transform: rotate(0);        -ms-transform: rotate(0);        transform: rotate(0)    } }

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

      var evt = "onorientationchange" in window ? "orientationchange" : "resize";    window.addEventListener(evt, function() {        var width = document.documentElement.clientWidth;          var height =  document.documentElement.clientHeight;          $print =  $('#print');          if( width > height ){              $print.width(width);            $print.height(height);            $print.css('top',  0 );            $print.css('left',  0 );            $print.css('transform' , 'none');            $print.css('transform-origin' , '50% 50%');          }          else{            $print.width(height);            $print.height(width);            $print.css('top',  (height-width)/2 );            $print.css('left',  0-(height-width)/2 );            $print.css('transform' , 'rotate(90deg)');            $print.css('transform-origin' , '50% 50%');          }      }, false);

感谢阅读

喜欢小编文章的，可以点个订阅，小编都会不停更新文章，分享前端学习知识，以及程序员的趣事！