web-dev-qa-db-ja.com

iPhone Safariがキーボードを開いたときにビューポートのサイズを変更しない

モバイルサファリは、キーボードがポップアップしたときにwindow.innerHeightを更新しません。 （少なくとも9.3.5では、 this のようないくつかの回答があり、iOS 8.2で機能しなくなったというコメントが付いています）

Appleドキュメント 言う彼らが編集する前に言っていました そのwindow.innerHeightはiOS 10で戻ってきます。

IOS 10では、WKWebViewオブジェクトは、キーボードが表示されているときにwindow.innerHeightプロパティを更新することでSafariのネイティブの動作と一致し、サイズ変更イベントを呼び出しません。

サイズ変更するのではなく、Webサイトをビューの外に押し出すだけのiphoneサファリに対処するために、その間に何をすべきかを知る必要があります。

すべてに対して絶対配置を使用するアプリケーションがあり、ヘッダーとフッターの間にオーバーフローがあるdivがあります。

.mainContent {
  position: absolute;
  top: 50px;
  bottom: 28px;
  left: 0;
  right: 0;
}

Plunker ここに。

Androidで期待どおりに機能するスクリーンショット：

IPhoneで期待どおりに機能しない：

この答えに基づいて iphoneのキーボードが開いているかどうかを判断するネイティブJSの方法があります、

    document.getElementById('chat-input').addEventListener('focus', function(){
      if(/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream){
        console.log("IOS focus");
        var scroll = window.scrollTop;
        window.scrollTop = 10;
        var keyboard_shown = window.scrollTop > 0;
        window.scrollTop = scroll;

        if(keyboard_shown){
          console.log("keyboard");
        }else{
          console.log("no keyboard");
        } 
      } 
    });
  })();

しかし、window.innerHeightは変更されないため、実際には問題が解決されず、キーボードの大きさがわかりません。 iphoneの解像度とそのキーボードの高さのリストを作成して、ひどいハードコーディング担当者になることもできます...

htmlioscssmobile-safariviewport
18
mtfurlan

Safari 10ドキュメント

IOS 10のSafariおよびWKWebViewは、キーボードが表示されているときにwindow.innerHeightプロパティを更新しません。以前のバージョンのiOSでは、キーボードが表示されたときにWKWebViewがwindow.innerHeightプロパティを更新していました。

ドキュメントに、OPで指摘された動作と逆の動作が記載されているようです

5
blackmamba

IOS 13以降、これは VisualViewport API 実装を使用することで解決されたようです。

1
Matan Hershberg