移动端开发中遇到兼容bug收集

1.在ios键盘中首字母大写的问题？

        ios会首字母自动大写

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

2.ios日期转换NAN问题

具体就是new Date（‘2020-11-12 00：00：00’）在iOS中会成为NAN

解决方式：用new Date（‘2020/11/12 00：00：00’）的日期格式或者写个正则转换

3.禁止触发系统菜单和长按选中

//禁止触发系统菜单，全局屏蔽
html,body{
    touch-callout：none;
    -webkit-touch-callout：none;
}
//禁止ios和android系统选中文字+长按选中
html,body{
    user-select:none;
    -webkit-user-select:none;
}

4.ios系统中元素被触摸时产生的半透明灰色遮罩

a,button,input,textarea{
    -webkit-tap-highlight-color:rgba(0,0,0,0)
}

5.h5底部输入框被键盘遮挡

        h5页面有个很头疼的问题就是，当输入框在最底部，点击软键盘后输入框会被遮挡，可采用改变底部输入框的定位。或者开发时避免这样的设计

代码：

const oHeigth= $(document).heigth();//浏览器当前的高度
//监听浏览器混动
$(window).resize(funticon(){
    //开启软键盘后
    if( $(document).heigth() < oHeigth){
        $("#footer").css("position","static");    
    }else{
        未开启
        $("#footer").css("position","absolute");    
    }
})

6.在移动端使用cilck事件有300ms延迟的问题

解决方式：

1.禁止双击缩放 ：meta：user-scalabel = no

2.使用fastclick.js

<script scr="fastclick.js" type="text/javascript"></script>
if('addEventListener' in  document){
    document.addEventListener("DOMContentLoaded",function(){
           FastClick.attach(document.body) 
    },false)
}

7.在移动端中，如果给元素设置1px的像素边的，手机上看起来是会比1px像素粗的

解决方式：使用伪类元素模拟边框使用transform缩放

@media screen and (-webikt-min-device-pixel-ratio:2){
    .button:after{
        border-radius:calc(5px*2);
        width:calc(100%*2);  
        height:(100%*2); 
        transform:scale(calc(1/2)); 
    }
}
@media screen and (-webikt-min-device-pixel-ratio:4){
    .button:after{
        border-radius:calc(5px*4);
        width:calc(100%*4);  
        height:(100%*4); 
        transform:scale(calc(1/4)); 
    }
}

8.消除transition闪屏

-webkit-transform-style:preserve-3d; /*设置内嵌的元素在3D空间如何呈现：保留3D*/

-webkit-backface-visibility：hidden; /*设置进行转换的元素的背面在面对用户时是否可见*/

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

触屏播放：

$('html').one('touchstar',funticon(){
    audio.play();
})

10.android下取消输入语音按钮

input::-webkit-input-speech-button{display:none}

11.fixed定位缺陷

ios下fixed元素容易定位出错，软键盘弹出时，影响fixed元素定位

android下fixed表现要比ios更好，软键盘弹出时，不会影响fixed元素定位

ios4下不支持position:fixed

解决方案：可用iScroll插件解决这个问题

12.input的placeholder会出现文本位置偏上的情况

input的placeholder会出现文本位置偏上的情况：PC端设置line-height等于height能够对齐，而移动端依然时偏上，解决是设置，line-height：normal

13.android里的line-height不局中

把字号内外边距等设置为需求大小的2倍，使用transform进行缩放。（不适用）

把字号内外边距等设置为需要大小的2倍，只用zoom进行缩放，可以完美解决

把line-height设置为0，使用padding值把元素撑开，说是能解决（不适用）

        原因：在文档流中zoom加在任意一个元素上都会引起一整个页面的重新渲染，而scale只是在当前的元素上重绘。

        scale变化时候，其原本的尺寸是不变的，因此没有layout的重计算；但是zoom牵一发动全身

差异：

1、zoom的缩放是相对于左上角的；而scale默认是居中缩放

2、zoom的缩放改变了元素占据的空间大小；而scale的缩放占据的原始尺寸不变，页面布局不会发生变化

3、zoom和scale对元素的渲染计算方法可能有差异（有可能会引起图片失真）

4、对文字的缩放规则不一致。zoom缩放依然受限于最小12像素中文大小限制；而scale就是纯粹的对图形进行比例控制

注：zoom和transform scale不要同时使用，因为缩放效果会叠加

14.禁止数字识别为电话号码

<meta name=“format-detection” content="telephone=no">