移动端常见bug汇总

Posted 2022-07-14 lin00

点击样式闪动

Q: 当你点击一个链接或者通过javascript定义的可点击元素的时候，它就会出现一个半透明的灰色背景。

A:根本原因是-webkit-tap-highlight-color，这个属性是用于设定元素在移动设备（如Adnroid、ios）上被触发点击事件时，响应的背景框的颜色。建议写在样式初始化中以避免所以问题：div,input(selector) -webkit-tap-highlight-color: rgba(0,0,0,0);另外出现蓝色边框：outline:none;

/*i.e . Nexus5/Chrome and Kindle Fire HD 7 ''*/
-webkit-tap-highlight-color : rgba (255, 255, 255, 0);
-webkit-tap-highlight-color : transparent ; 

屏蔽用户选择

Q: 禁止用户选择页面中的文字或者图片

A:代码如下

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

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

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

A:代码如下

-webkit-appearance: none;

禁止文本缩放

Q: 禁止文本缩放

A:代码如下

-webkit-text-size-adjust: 100%;

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

body  
    -webkit-text-size-adjust: 100% !important;  
    text-size-adjust: 100% !important;  
    -moz-text-size-adjust: 100% !important;  
 

如何禁止保存或拷贝图像

Q: 如何禁止保存或拷贝图像

A:代码如下

img
    -webkit-touch-callout: none;

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

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

A:代码如下

-webkit-font-smoothing: antialiased;

设置input里面placeholder字体的大小

::-webkit-input-placeholder font-size:10pt;

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

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

A:代码如下,触屏及播放

$('html').one('touchstart',function()
    audio.play()
)

Html5的audio音频在电脑端和android端都可以实现自动播放，在iphone上无法实现，下面针对的是微信浏览器里面的解决方法

/* 苹果自动播放 */
document.addEventListener("WeixinJSBridgeReady", function () 
    document.getElementById('audio').play();
, false);

手机拍照和上传图片

Q: 针对file类型增加不同的accept字段

A:代码如下 <input type="file">的accept 属性

<!-- 选择照片 -->
<input type=file accept="image/*">
<!-- 选择视频 -->
<input type=file accept="video/*">

输入框自动填充颜色

Q: 针对input标签已经输入过的，会针对曾经输入的内容填充黄色背景，这是webkit内核自动添加的，对应的属性是autocomplete,默认是on,另对应的样式是input:-webkit-autofill 且是不可更改的。

A:方案如下

1. 设置标签的autocomplete="off",亲测无效可能
2. 设置盒子的内阴影为你常态的颜色（下面以白色为例）

box-shadow:0 0  0 1000px  #fff inset ;
-webkit-box-shadow: 0 0 0px 1000px #fff inset;

开启硬件加速

Q: 优化渲染性能

A:代码如下

-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);

移动端去除type为number的箭头

input::-webkit-outer-spin-button,input::-webkit-inner-spin-button
    -webkit-appearance: none !important;
    margin: 0; 

实现横屏竖屏的方案

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);

参考资料：css或者js实现横屏竖屏的方案

fastclick导致下拉框焦点冲突

Q: 移动端使用fastclick之后，在ios环境下，有几个连续的下拉框 第一个select框突然填充了第二个下拉框的内容。

A:根本原因是Fastclick导致IOS下多个 select ，点击某一个，焦点不停变换的bug。修改源码，在onTouchStart事件内判断设备是否为IOS，再判断当前nodeName是否为select，如果是return false去阻止fastClick执行其他事件

github源码地址：fastclick.js

//line 391行
FastClick.prototype.onTouchStart = function(event) 

//在其方法中添加判断 符合ios select的时候 不返回事件
if(deviceIsIOS&&this.targetElement =="select")
this.targetElement = null
event.preventDefault();


//line521 或者讲源码中 有关touchEnd判断非ios或者非select的事件注释，
if (!deviceIsIOS || targetTagName !== 'select') 
    this.targetElement = null;
    event.preventDefault();

ios input不能自动获取焦点

Q: 如题，希望在某个页面时可以自动让输入框获取焦点

A: 解决方案：

document.addEventListener('touchstart',function(e)
    document.getElementById('focus').focus();
); //不能把focus封装起来起来触发，那样也无效

备注：具体实现效果待验证，希望有时间的可以验证追加可能的问题以及补充方案

去除webkit默认的滚动条

Q: 如题

A: 解决方案：

element::-webkit-scrollbar
    display:none;

video 不能自动播放

Q: 如题

A: 解决方案：

1. autoplay 及 js 控制播放，仍然有部分设备不起作用

$("html").one("touchstart",function()
    video.play();
)

inline-block元素使用vertical-align后，父元素高度被莫名撑开

Q: 如题，不一定出现在移动端，但是移动端会效果比较严重，一般是用于设置同行内容垂直居中的

A: 解决方案：

.par
    font-size:0

背景图片没实现自适应

Q: 如题

A: 解决方案：用background-size

element
    background-size:100% 100%;

css3 translate3d平移效果后的元素子元素闪动

Q: 应用css3 translate3d平移效果后的标签元素，在ios上的safari以及app的webview中会出现页面加载完成后其子元素闪动现象，具体如下：

<ul style="-webkit-transform: translate3d(0, 0, 0); -webkit-transition: 0ms; ">
    <li>
        <img src="http://pic2.58.com/m58/m3/img/imglogo_gray.png" ref="http://1.pic.58control.cn/p1/big/n_22998799743506.jpg">
    </li>
</ul>

A: 解决方案：

1. 可在其子元素中统一添加和其相同的属性，具体如下：

<ul style="-webkit-transform: translate3d(0, 0, 0); -webkit-transition: 0ms; ">
    <li style="-webkit-transform: translate3d(0, 0, 0); ">
        <img src="http://pic2.58.com/m58/m3/img/imglogo_gray.png" ref="http://1.pic.58control.cn/p1/big/n_22998799743506.jpg">
    </li>
</ul>

1. 在其元素中添加如下属性：

-webkit-backface-visibility: hidden;/* (设置进行转换的元素的背面在面对用户时是否可见：隐藏）*/
-webkit-transform-style: preserve-3d; /*(设置内嵌的元素在3D 空间如何呈现：保留3D ）*/

position:fixed 固定效果

Q: 当给指定元素添加position:fixed时首次加载页面完成后，滑动整个网页，添加此样式的元素会跟随页面滚动（目的是固定此元素）。

A: 解决方案：为其元素添加如下css属性即可：

-webkit-transform：translate3d(0,0,0)

备注：此方案不一定有效，需要后续验证或者提供更好的方案

IOS键盘字母输入，默认首字母大写

<input type="text" autocapitalize="off" />

select 下拉选择设置右对齐

Q: 如题，默认是左对齐，产品有其他需求

A: 解决方案：

select option 
    direction: rtl;

通过transform进行skew变形，rotate旋转会造成出现锯齿现象

Q: 如题

A: 解决方案：

-webkit-transform: rotate(-4deg) skew(10deg) translateZ(0);
transform: rotate(-4deg) skew(10deg) translateZ(0);
outline: 1px solid rgba(255,255,255,0)

移动端点击延迟

Q: 如题

A: 解决方案：引用 fastclick.js

移动端点透问题

Q: 如题,当点击绝对定位元素的时候，下面的元素虽然被遮盖，但也被触发了。

A: 原因是：touchstart 早于 touchend 早于click。 亦即click的触发是有延迟的，这个时间大概在300ms左右，也就是说我们tap触发之后蒙层隐藏， 此时 click还没有触发，300ms之后由于蒙层隐藏，我们的click触发到了下面的a链接上。

解决方案：

• 尽量都使用touch事件来替换click事件。例如用touchend事件(推荐)。
• 用fastclick，https://github.com/ftlabs/fastclick
• 用preventDefault阻止a标签的click
• 延迟一定的时间(300ms+)来处理事件 （不推荐）
• 以上一般都能解决，实在不行就换成click事件。

关于 iOS 系统中，中文输入法输入英文时，字母之间可能会出现一个六分之一空格

Q: 如题

A: 解决方案：通过正则替换

    this.value = this.value.replace(/\u2006/g, '');

Retina屏的1px边框

Q: 如题

A: 解决方案：

Element
    border-width: thin;

input 的 compositionstart 和 compositionend 事件

在 Web 开发中，经常要对表单元素的输入进行限制，比如说不允许输入特殊字符，标点。通常我们会监听 input 事件:

inputElement.addEventListener('input', function(event) 
  let regex = /[^1-9a-zA-Z]/g;
  event.target.value = event.target.value.replace(regex, '');
  event.returnValue = false
);

这段代码在 android 上是没有问题的，但是在 iOS 中，input 事件会截断非直接输入，什么是非直接输入呢，在我们输入汉字的时候，比如说「喜茶」，中间过程中会输入拼音，每次输入一个字母都会触发 input 事件，然而在没有点选候选字或者点击「选定」按钮前，都属于非直接输入。

compositionstart 事件在用户开始进行非直接输入的时候触发，而在非直接输入结束，也即用户点选候选词或者点击「选定」按钮之后，会触发 compositionend 事件。

var inputLock = false;
function do(inputElement) 
    var regex = /[^1-9a-zA-Z]/g;
    inputElement.value = inputElement.value.replace(regex, '');


inputElement.addEventListener('compositionstart', function() 
  inputLock = true;
);


inputElement.addEventListener('compositionend', function(event) 
  inputLock = false;
  do(event.target);
)


inputElement.addEventListener('input', function(event) 
  if (!inputLock) 
    do(event.target);
    event.returnValue = false;
  
);

添加一个 inputLock 变量，当用户未完成直接输入前，inputLock 为 true，不触发 input 事件中的逻辑，当用户完成有效输入之后，inputLock 设置为 false，触发 input 事件的逻辑。这里需要注意的一点是，compositionend 事件是在 input 事件后触发的，所以在 compositionend事件触发时，也要调用 input 事件处理逻辑。

参考
移动端采坑指南-知乎（熊汉彪）

[移动端常见bug汇总001]https://juejin.im/post/5af918636fb9a07ac5603ecb