これは、iOS MobileSafariの主要な割合のMSIEのような不具合のようです。実際には、それはそれよりもさらに大きくなっています。何故ならば、それは明らかにChromeによって実際には取り上げられなかったからです。 https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.htmlによると
:iOSのは、異なる画面解像度を持つデバイス上で実行されるため、デバイスの寸法を参照する際に
、あなたの代わりに、数値の定数を使用する必要があります。デバイスの幅はdevice-width
、縦向きの高さはdevice-height
を使用してください。
明らかに、この機能は非常にばかげて混乱しているため、正しくドキュメント化できません。
LMFTFY:縦向きで高さ幅のための装置の幅とdevice-height
ため
使用device-width
。
それは、この幅の周りにはJavaScriptのない回避策は存在しない、実際にすべての後に、幅されていない、判明:
あなたはすべてのビューポートプロパティを設定する必要はありません。プロパティのサブセットのみが設定されている場合、iOSのSafariは他の値を推論します。たとえば、縮尺を1.0に設定した場合、Safariは横幅がdevice-width
、横方向がdevice-height
とみなします。したがって、幅を980ピクセルにし、最初の縮尺を1.0にする場合は、これらのプロパティを両方とも設定します。
LMFTFY:
あなたはすべてのビューポートプロパティを設定する必要はありません。プロパティのサブセットのみが設定されている場合、iOSのSafariは他の値を推論します。たとえば、縮尺を1.0に設定した場合、Safariは横幅がdevice-width
、横方向がdevice-height
とみなします。したがって、幅を980ピクセルにし、最初の縮尺を1.0にしたい場合は、を入力して、これらのプロパティを両方とも設定します。レスポンシブウェブデザインを実践する場合は、initial-scale
を1.0に設定し、widthプロパティだけを残してください。
サファリの互換性が要求されると、ビューポートのプロパティではなくinitial-scale = 1.0
に設定する必要がある場合などは、明らかに、width=device-width
を設定する一般的なアドバイスは全くと途方もなく間違っています。
これは(ただし、彼らのTL; DRの概要はまだ誤った情報を提示)https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/set-the-viewport?hl=enで深いダウン認知されるように表示されます。
一部のブラウザではなくランドスケープモードに回転させたときのページの幅を一定に保つため、ズームしますスクリーンを満たすためにリフローする。属性initial-scale = 1を追加すると、デバイスの向きに関係なく、CSSピクセルとデバイスに依存しないピクセルの間に1:1の関係が確立され、ページはフルランドスケープ幅を利用できます。要約すると
:
-<meta name = 'viewport' content = 'width = device-width' />
+<meta name = 'viewport' content = 'initial-scale = 1' />