2016-05-10 13 views
2

<meta name = "viewport" content = "width = device-width"を応答性の高いHTML5ページに追加すると、デフォルトの1emフォントがiOSを含むすべてのモバイルデバイスに適切に表示されますサファリ;ただし、縦の縦長の画像から横向きの横長の画像に変更すると、フォントサイズが変更されます(インターフェイスの要素は同じですが、ページ上のすべてが大きすぎます)。この変更はiOSのSafariでのみ発生します。 AndroidのChromeでは使用できません。ビューポートデバイスの幅:Safariの横幅/太字フォント(Chromeで正しくない)

なぜSafariで回転するとフォントサイズが変わるのですか?私は上記のメタが、私のサイトがすべての画面サイズに対して反応するように最適化されていることを示すには十分だと思ったのですが、そうではありませんか?

iOS Safariで指定する必要がある特別な機能はありますか?何が指定されているにもかかわらず、私のサイトがdevice-widthにスケーリングされたときに見ることができないと仮定しているのはなぜですか?

答えて

0

これは、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' /> 
関連する問題