iPhoneX前端适配

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

这几年手机更新的速度越来越快,手机屏幕也是各式各样,就拿iphoneX来说,这种怪异的刘海屏,如果把普通的浏览器网页照搬到iPhoneX上,有些地方显示会出现一些问题。

好在IOS为其自己怪异的屏幕带来了一个新的特性标识来兼容。在IOS11及以上系统中有一个viewport meta的扩展,可以设置如下值

  • contain: 让内容充满可视窗口

  • cover:内容充满整个屏幕

  • auto: 默认,与contain表现一致

那么,我们可以在meta中添加如下设置来兼容

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

但是,这样还是不行的,因为内容区还是可能会被刘海部分挡住,还有手机最下面的那条黑线也会挡住内容。

在IOS11及以上的系统中还提供了四个预定义的常量,表示距离安全区的距离。

  • safe-area-inset-left:安全区域距离左边边界距离

  • safe-area-inset-right:安全区域距离右边边界距离

  • safe-area-inset-top:安全区域距离顶部边界距离

  • safe-area-inset-bottom:安全区域距离底部边界距离

有了这些参数,就可以轻松的让内容显示在安全区内,以免发生遮挡。

<style>
html,body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
  margin: 0;
}
header {
  flex: none;
  padding-top: env(safe-area-inset-top);
}
header ul {
  padding-left: 0;
  display: flex;
  list-style: none;
}
header ul li {
  text-align: center;
  flex: 1;
}
footer {
  flex: none;
  padding-bottom: env(safe-area-inset-bottom);
}
main {
  flex: 1;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
</style>
<body>
    <header>
      <ul>
        <li>lorem1</li>
        <li>lorem2</li>
        <li>lorem3</li>
        <li>lorem4</li>
      </ul>
    </header>
    <main>
      <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias assumenda autem cupiditate id labore libero maiores, modi nam nihil nostrum omnis perspiciatis praesentium quibusdam quidem, quisquam quos repellendus repudiandae sint!</div>
    </main>
    <footer>
      <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores assumenda atque blanditiis deleniti ducimus error eveniet, itaque laudantium maxime minima natus neque nisi nostrum obcaecati omnis provident quas saepe voluptate?</div>
    </footer>
</body>

按照上述的这种做法,可以在iPhoneX上将内容显示在安全区内。但是,如果不是在iPhoneX上呢,那么便不能识别safe-area-inset-left这样的几个属性,那么自然添加的padding不能产生效果。上述的显示效果如下:

如果,我希望在普通屏幕下为其添加一定的边距填充该怎么办呢?

此时可以用到maxmix这两个属性,这两个属性会自动对宽度进行计算,详细介绍见MDN

对上述的样式进行部分修改

main {
  flex: 1;
  padding-left: 15px;
  padding-right: 15px;
}

@supports (padding: max(0px)) {
  main {
    flex: 1;
    padding-left: max(15px, env(safe-area-inset-left));
    padding-right: max(15px, env(safe-area-inset-right));
  }
}

这样,在iPhoneX手机上则会使用安全边距,在普通屏幕上则会使用15px边距。

如下效果

相关文章