在 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 变量，以确保重要内容不会呈现在显示之外。