<meta name = "viewport" content = "width = device-width"レスポンシブ HTML5 ページに追加した後1em、iOS Safari を含むすべてのモバイル デバイスでデフォルト フォントが適切で使用可能なサイズで表示されます。ただし、画面を縦向きの縦向きから横向きの横向きに回転すると、フォント サイズが変更されます (インターフェイス要素は同じままでも、ページ上のすべてが大きくなりすぎます)。この変更は、iOS の Safari でのみ発生します。 Android の Chrome にはありません。
Safariで回転するとフォントサイズが変わるのはなぜですか? 上記のメタは、サイトがすべての画面サイズに対応するように最適化されていることを示すのに十分だと思いましたが、そうではありませんか?
iOS Safari で指定する必要がある特別な癖はありますか? device-width正確に指定されているにもかかわらず、スケーリングするとサイトが表示できないと想定されるのはなぜですか?!
これは、iOS MobileSafari での MSIE に似た大事故のようです。実際、それはそれよりもさらに大きいです。なぜなら、何らかの理由で、実際には Chrome によって検出されなかったからです。
iOS はさまざまな画面解像度のデバイスで実行されるため、デバイスの寸法を参照するときは、数値ではなく定数を使用する必要があります。
device-widthデバイスの幅とdevice-height縦向きの高さに使用します。
どうやら、その機能は非常に紛らわしいので、彼ら自身はそれを適切に文書化することさえできません!
LMFTFY:
デバイスdevice-widthの幅device-heightと身長縦向きの幅。
結局のところ、この幅が実際の幅ではないことを回避する 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 にする場合は、これらのプロパティを両方とも設定します。レスポンシブ Web デザインを実践している場合は、initial-scaleを 1.0 にのみ設定し、幅プロパティをそのままにしておく必要があります。
たとえば、どうやら、width=device-widthSafari との互換性が必要な場合、設定に関する一般的なアドバイスはまったくばかげて間違っており、代わりにビューポート プロパティを に設定する必要がありますinitial-scale = 1.0。
これは、 https: //developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/set-the-viewport?hl=enで深く認識されているようです (ただし、tl;dr の概要はまだ表示されています誤った情報):
一部のブラウザーは、横向きモードに回転するときにページの幅を一定に保ち、リフローではなくズームして画面いっぱいに表示します。属性 initial-scale=1 を追加すると、デバイスの向きに関係なく、CSS ピクセルとデバイスに依存しないピクセルの間に 1:1 の関係を確立するようブラウザーに指示し、ページが横幅全体を利用できるようにします。
要約すれば：
-<meta name = 'viewport' content = 'width = device-width' />
+<meta name = 'viewport' content = 'initial-scale = 1' />