viewport-fit 报错

在 iOS 10 上报错：

Viewport argument key "viewport-fit" not recognized and ignored.

原因：

iPhone X机型，对于它的“刘海儿”和底部Home Indicator, 针对H5页面的适配，苹果提供了特殊属性支持，包括meta标签的viewport属性值中加入viewport-fit和加入constant(safe-area-inset-X)和env(safe-area-inset-X) 。这些属性适用于iOS11以上的所有iPhone机型。

• 针对iOS11.0以下系统：

不识别H5页面meta标签下的viewport-fit及constant(safe-area-inset-X)／env(safe-area-inset-X)属性。

• 针对于iOS11.0以上系统：

当设置了viewport-fit=cover，H5页面会覆盖页面安全区域全屏展示，但是这样会带来页面元素会被“刘海儿”和底部Home Indicator遮挡问题，所以苹果提供在css中设置constant(safe-area-inset-X)距离来规避遮挡问题。

页面不加viewport-fit=cover默认viewport-fit=contain/auto，也就是我们看到的页面不能覆盖安全区域的情况，此时constant(safe-area-inset-X)的值都为0。

所以在meta标签的viewpoint中加viewport-fit=cover时iOS10和iOS11下constant(safe-area-inset-X)值的表现是不一样的。

解决方法

(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;
    }
  }
  if (!viewportTag) {
    viewportTag = document.createElement("meta");
    viewportTag.setAttribute('name', 'viewport');
  }

  var viewportTagContent = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0';

  // 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);
})()

什么是viewport-fit

viewport-fit 是控制文档是如何填充满屏幕的。
viewport-fit有三个属性值：

viewport-fit: auto;
viewport-fit: contain;
viewport-fit: cover; 

• auto：此值不影响初始布局视图端口，并且整个web页面都是可查看的。
• contain：视图端口按比例缩放，以适合显示内嵌的最大矩形。
• cover：视图端口被缩放以填充设备显示。强烈建议使用 safe area inset 变量，以确保重要内容不会出现在显示之外。