欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

移动端安卓和ios兼容性汇总

程序员文章站 2024-03-25 10:14:46
...

问题1:iphoneX适配方法。

首先了解一下iphoneX设备基础信息,如下:

iphoneX屏幕组成:上部齐刘海(44px)+ 安全区域(safe area)+ 底部手势区域(34px)。

移动端安卓和ios兼容性汇总

默认,页面只显示在“安全区域”中,导致屏幕顶部和底部看起来很别扭,此时可以通过如下几种方式进行适配:

1):设置viewport-fit

viewport-fit可以取两个值contain(默认)或 cover

viewport-fit=contain:页面内容显示在安全区域;

viewport-fit=cover:页面内容显示在整个屏幕

通常需要设置 viewport-fit=cover,如下:

 

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">


2):媒体查询


@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3){    //这里写需要调整的样式
}

3):当设置viewport-fit=cover时,如下四个值需要设置,页面才会显示在安全区域中,设置如下:

    body { 

        padding-top: constant(safe-area-inset-top);  //为导航栏+状态栏总高度(88px)

        padding-left: constant(safe-area-inset-left);    //如果未竖屏时,为0  

        padding-right: constant(safe-area-inset-right);   //如果未竖屏时,为0  

        padding-bottom: constant(safe-area-inset-bottom);   //为底部圆弧高度(34px)

    }

问题2:使用 $(window).resize(...) 无效。

可能由于框架或插件原因,有时候$(window).resize(...)不生效。

解决方案:使用 window.onresize = function () {...} 即可。

问题3:gif动图附近会闪烁

问题描述:有些手机上,gif动图图片附近会有闪烁现象;

经测试发现,手机卡顿越严重,闪烁越明显,所以基本确定是由于手机卡顿造成的;

解决办法:进可能减少gif动图帧数量,或直接忽略这些卡顿的手机(通常是比较老的机型/系统)。

问题3:ios手机页面里可滚动内容滚动不流畅

问题描述:ios手机上,网页中可滚动区域滚动不流畅,手指滑动多少页面就只滚动多少,没有弹性效果

解决办法:-webkit-overflow-scrolling : touch;

加上上面这段代码即可。