适配iphoneX系列

适配方案

安全区

meta viewpoint 内添加 viewport-fit=cover,即


注:ios 设备一定要添加这个属性,可以有效避免莫名的点击穿透和定位问题

页面高度

距离顶部44px,body原有高度100%,无法撑开整个屏幕,使用100vh代替。

titlebar

距离顶部44px,也就是在原有20px的基础上,在添加24px 例如

@media only screen
   and (device-width: 375px)
   and (device-height: 812px)
   and (-webkit-device-pixel-ratio: 3) {
       #linesInfo{
           padding-top:24px;
       }
   }

底部元素

为避开虚拟home键 ,距离底部34px ,按钮和底部之间不要留有留有空白,使用按钮色填充,写法举例

/*适配iPhone X ,iphone Xr ,iphone XS*/
@media only screen
    and (device-width: 375px)
    and (device-height: 812px)
    and (-webkit-device-pixel-ratio: 3),
    only screen
    and (device-width: 414px)
    and (device-height: 896px)
    and (-webkit-device-pixel-ratio: 2),
    only screen 
    and (device-width : 414px) 
    and (device-height : 896px) 
    and (-webkit-device-pixel-ratio : 3) 

你可能感兴趣的:(适配iphoneX系列)