Iphone X 下的适配

上山打老虎了

发布于 2022-06-15 08:43:14

2760

发布于 2022-06-15 08:43:14

文章被收录于专栏：Article

适配 iphoneX 的方法。概括来讲：

为了避免 iphoneX 的刘海和底部出现空白，苹果已经把 viewport-fit 增加到了 CSS Round Display 规范中。通过设置 viewport-fit 的值让 viewport 填充满整个屏幕。为了避免填充满屏幕后页面内容被刘海底部挡住，使用 env 函数设置 padding 值。

.post {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

env 也是苹果添加的一种方法，并向 CSS 工作组提出了标准化的建议。他们引入了 User Agent properties 的概念，用来在 css 中使用用户代理提供的变量，比如 safe-area-inset-left 等，参考 [css-variables] User Agent properties and variables #1693。注意一开始苹果提出的是 constant 方法，最后 CSS 工作组讨论后变更为 env 方法，所以在 IOS 11 中，仅支持 constant，而在 iOS 11.2+ 中移除了 constant，替换为 env

env 支持使用 calc() 方法进行计算

.post {
    padding-left: calc(env(safe-area-inset-left) + 12px);
}

Viewport 判断：

 <script>
  (function() {
    var viewportTag = null;
    var metaTags = document.getElementsByTagName('meta');
    for (var i = 0; i < metaTags.length; i++) {
      if (metaTags[i].getAttribute('name') === "viewport") {
        viewportTag = metaTags[i];
        break;
      }
    }
    var viewportTagContent = 'width=device-width,initial-scale=1,user-scalable=no';

    // Detect if iOS device
    if (/(iPhone|iPod|iPad)/i.test(window.navigator.userAgent)) {
      // Get iOS major version
      var iosVersion = parseInt((window.navigator.userAgent).match(/OS (\d+)_(\d+)_?(\d+)? like Mac OS X/i)[1]);
      // Detect if device is running >iOS 11
      // iOS 11's UIWebView and WKWebView changes the viewport behaviour to render viewport without the status bar. Need to override with "viewport-fit: cover" to include the status bar.
      if (iosVersion >= 11) {
        viewportTagContent += ', viewport-fit=cover';
      }
    }

    // Update viewport tag attribute
    viewportTag.setAttribute('content', viewportTagContent);
  })();
</script>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2019年12月27日，如有侵权请联系 cloudcommunity@tencent.com 删除

css