关于javascript:viewportfit-报错

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