Iphone X 下的适配

适配 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>           

複制