viewport-fit報告が間違っています

iOS 10にエラーが発生しました.

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

理由:
iPhone Xは、その「劉海児」とボトムHome Indicatorに対してH 5ページの適合に対して、特別な属性サポートを提供しています.metaタグのviewport属性値にview-fitを追加し、constant(safe-ara-inset-X)とenv(safe-are a-inset-X)を追加します.これらの属性はiOS 11以上の全iPhoneに適用されます.

iOS 11.0以下のシステムについて:

H 5ページmetaタグの下のviewport-fitおよびconstant(safe-ara-inset-X)／env(safe-are a-inset-X)属性は識別されません.

針はiOS 11.0以上のシステムに対して:

viewport-fit=coverを設置すると、H 5ページはページの安全エリアのフルスクリーンで展示されますが、ページ要素は「劉海児」とボトムHome Indicatorによって遮蔽されますので、アップルはcssにconstant(safe-ara-inset-X)の距離を設けて遮蔽問題を回避します.
ページにはviewport-fit=coverのデフォルトviewport-fit=contain/autが含まれていません.つまり、私たちが見たページが安全エリアをカバーできない場合、コンサートポイントの値はすべて0です.
だから、metaタグのviewpointでは、viewport-fit=cover時iOS 10とiOS 11でのconstant(safe-are a-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; 

aut:この値は初期レイアウトビューポートに影響を与えず、ウェブページ全体が閲覧可能である.

contain:埋め込まれた最大の長方形を表示するのに適したスケールでビューポートを拡大します.

カバー:ビューポートはデバイスの表示を満たすためにスケーリングされます.重要なコンテンツが表示外に出ないようにするために、safe ara inset変数を使用することを強く推奨する.