前端处理移动端兼容性问题记录1. mate mate： mate只能位于head元素内部，在html中没有结束标签 ma

1. mate

mate：

mate只能位于head元素内部，在html中没有结束标签
mate有两个属性mate-equiv和name属性

2. 适配

css像素px = 逻辑像素 = 独立像素；
物理像素pt = 设备像素：设备的一个个物理像素点，也就是分辨率；
视网膜屏(多倍屏)像素比 = 物理像素 / 逻辑像素 = pt / px，视网膜屏中，把4(2*2)个像素组成1个像素使用了，屏幕大小没有变化，画面更清晰了；

要解决的问题就是：

①适配屏幕大小，就是适配css像素

②适配不同像素密度，就是适配不同屏幕下dpr不一致导致的问题

2.1 rem适配方案

rem是根据根视图的font-size适配，而em是根据父容器的font-size适配

function setRem(){

    const WIDTH = 375

    const scale = document.documentElement.clientWidth / WIDTH

    document.documentElement.style.fontSize = 100 * scale + ‘px’

}// 乘以100 的目的是为了便于rem转换，又可以提升精确度

setRem()

window.onresize = setRem

仍然需要解决1像素边框问题

缩放实现transform: scaleY(0.5)

优点是编写简单，但是如果实现上下左右四条边框会比较难搞，并且如果有嵌套存在的话，会对包含的元素产生影响，所以结合 :before 和 :after 来使用

.calss1 {
  position: relative;
  &::after {
    content:"";
    position: absolute;
    bottom:0px;
    left:0px;
    right:0px;
    border-top:1px solid #666;
    transform: scaleY(0.5);
  }
}

图片代替

2.1 vm

@function px2vw($px) {

    @return $px / 375 * 100vw

}

2. 图片高清的问题iOS 和安卓都存在的问题

普通图片在多倍屏上显示模糊，多倍屏上在普通屏幕上显示缺少色差，并且浪费带宽，所以预留了设备像素比的方案：利用css媒体来查询


@media (-webkit-min-device-pixel-ratio: 3.0),(min-device-pixel-ratio: 3.0)
    background: url("./img/pageTopBg2@3x.png") 0 -0.1rem,url("./img/pageTopBg@3x.png") 0 -0.62rem

3. 安卓端默认字体大小问题

安卓手机在出厂的时候默认字体大小为18px，而不是标准的16px，

(function(){

    if (typeof window.orientation != 'undefined') {

        var fontSize = 16 * window.innerWidth / 375;

        document.documentElement.style.fontSize = fontSize + 'px';

    }

})();

4. fastClick.attach(document.body)解决移动端300ms延迟的问题

5. iOS端显示日期问题(NaN，null)

let newTime = oldTime.replace(/-/g, "/")

6. 安卓端输入框问题

安卓端如果输入框在底部的话，弹出键盘会遮挡输入框，且关闭原生键盘后，输入框没有失焦，

解决：element.scrollIntoView 或者 Element.scrollIntoViewIfNeeded来解决遮挡的问题；使用监听页面的resize事件来解决没有失焦的问题

7.iphonex适配

padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
注：contant() 和 env() 需要同时存在，而且顺序不能换

常见问题

点击元素出现背景色块

-webkit-tap-highlight-color:rgb(255,0,0,0)

禁止图片长按

pointer-events:none

禁止字体调整

text-size-adjust: 100%

识别文本换行

white-space: pre-line

刘海问题

<mate name=’viewport’ content=’viewport-fit=cover’

前端处理移动端兼容性问题记录