web-dev-qa-db-ja.com

iOSの自動フォントサイズ調整を回避する方法

私は[〜＃〜] not [〜＃〜]ページのズームについて話しますが、iOS上のMobileSafariが一部のフォントサイズを自動的に上げる方法です。

正確に、これはいつ行われますか？予防または落胆することはできますか？

cssiosmobile-safari
51
Alan H.

追跡に多くの問題がありましたが、それはCSSの-webkit-text-size-adjustプロパティです。

これと他のiOS固有のCSSの詳細はこちら 。

値：

  • 割合（デフォルトサイズ）、例： 120%、または100%
  • auto（デフォルト）
  • none – autoがページで機能しない場合しかし、これはズームに関する問題を引き起こすことがよくあります。代わりに100%を使用します。たとえば、デスクトップでSafariを開き、ページをズームします（Command-Plus）– pageページ全体がズームされても、テキストは拡大されません。 ！ 禁止none！を使用してください

これらはページレベルだけでなく、要素/ウィジェット/コンテナレベルでも適用できることに注意してください。

（ウェブサイトに100%の値を指定するのは、小さな画面用に既に最適化されていると確信している場合を除き、問題が発生するためnoneは指定しません。）

Firefox Mobile（例AndroidおよびFirefox OS）には、同様のプロパティ-moz-text-size-adjust、 ここに文書化 。これを指摘してくれたコスタに感謝します。

どうやら、MicrosoftにはモバイルIE用の-ms-text-size-adjustのバージョンもあります。

29
Alan H.
body {
    -webkit-text-size-adjust: 100%;
}

そもそも、すべてのテキストが読みやすいサイズであることを確認してください。 iPhoneとiPod touchの画面はかなり小さいため、その点にも留意してください。

81
BoltClock

受け入れられた答えは機能しますが、他のWebkitブラウザーでは、ズームしているユーザーに対してfont-sizeをロックします。 noneではなく100%を使用すると、両方の方法で機能します。

body {
    -webkit-text-size-adjust: 100%;
}
14
dc-