iPhoneX及以上类型的手机前端页面适配

该文章由 leevare 发布于 ,归类于 HTML/CSS

在 iPhoneX 这种怪异的屏幕上,由于存在顶部的刘海和底部的横条,所以,使用普通的布局方式,页面的顶部和底部可能会被盖住。对于这种问题,还好苹果给出了解决方案,提出了安全区的概念。

首先需要在meta标签中添加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">

然后就可以设置安全区的内padding边距,以保证内容能显示在安全区中。需要注意的是,必须添加viewport-fit=cover属性,安全区才会生效。

body {
  padding-top: constant(safe-area-inset-top);
  padding-top: env(safe-area-inset-top);
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: constant(safe-area-inset-left);
  padding-left: env(safe-area-inset-left);
  padding-right: constant(safe-area-inset-right);
  padding-right: env(safe-area-inset-right);
}

在 IOS11 中,新增了上面几个safe-area-inset-top这样的属性,在 iOS11.2 之前,可以使用constant(),但是 IOS11.2 之后,这个属性就不支持了,所以需要使用env()来兼容。

然后使用媒体查询判断手机型号,来让 iPhoneX、iPhoneXS 等这样的手机使用上面的布局,而其他的不受影响。

/* XS / XS Max / XR 适配 */
@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: 3),
  only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) {
  /*头部适配*/
  .header-bar {
    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);
  }

  /*底部适配*/
  .footer-bar {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }
}

手机尺寸如下所示(图片来源于网络)

这样,就适配了 iPhoneX 等这样怪异的手机屏幕,本文完。

如果觉得我的文章对您有用,请您随意打赏。您的支持将鼓励我更加努力创作!

相关文章:

说点什么

avatar
300
  Subscribe  
提醒