[解決済み] Mobile Safari (iPhone)のフォントサイズの問題を修正しました。

質問

私たちのサイトは、モバイル Safari で一貫性のないフォント サイズで表示されます (私たちが知る限りでは、モバイル Safari のみ)。これは非常に困惑しています。

Firebug でサイトを分析したところ、不正な領域は正しいスタイルを継承していますが、フォントはまだ間違ったサイズでレンダリングされています。

1) 訪問 http://www.panabee.com .

2) ドメイン名の検索を行う。

左側のボックスは、フォント サイズが正しくありません。フォント サイズは、右側のフォント サイズ (ボックスのタイトルとボックスのコピーの両方) と一致させる必要があります。たとえば、タイトル「Variations」と「Twitter」は、タイトル「Alternate Endings」よりもはるかに大きくなっています。

その理由は何ですか？

どのように解決するのですか？

Mobile Safari (Android 版 Chrome、Mobile Firefox、IE Mobile など) は、幅の広いブロックのフォント サイズを (常時) 大きくし、そのブロックをダブルタップして拡大すると (ブロックが画面幅に収まる)、テキストが読みやすくなるようにします。もしあなたが -webkit-text-size-adjust: 100% (または none ピンチズームすれば読むことができますが、その場合、テキストは画面より広くなり、テキストの各行を読むために水平方向に移動する必要があります。

1. 理想的には、この問題を解決するために レスポンシブ ウェブ デザイン のテクニックを使用して、デザインをモバイルの画面サイズに適応させることです (この場合、非常に広いブロックはもはや存在しないので、モバイル ブラウザはフォント サイズを調整しなくなります)。

2. それができず、モバイル ユーザーにデスクトップ サイトを提供することになる場合、デザインを微調整して、テキストのどのブロックもモバイル デバイスのデバイス幅 (たとえば、多くの縦長の携帯電話の場合は 320px) より広くならないようにできるかどうかを確認します (デスクトップ ブラウザへの影響を避けるためにモバイル専用の CSS を使用できます)。

3. 最後に、もしあなたが 本当に を設定することで、Mobile Safari がフォントサイズを調整するのを防ぐことができます。 -webkit-text-size-adjust: 100% を設定することができますが、次のようにしてください。 は最後の手段です。 を使用すると、テキストが小さすぎたり、一行読むごとに左右に移動しなければならなかったりして、モバイルユーザーがテキストを読みづらくなる可能性が高いからです。なお、テキストを読む際には必ず 100% ではなく none なぜなら はデスクトップ・ブラウザーでは厄介な副作用があるからです。 . また、同等の -moz-text-size-adjust と -ms-text-size-adjust プロパティを追加しました。

編集：例えばあなたの場合、最もシンプルなのは2番目の選択肢でしょうから、次のCSSを追加してみてはいかがでしょうか。

/* Mobile browsers only */
@media only screen and (max-device-width: 480px) {
    table#all_results {
        width: auto;
    }
    td#main_box {
        width: 320px;
    }
    td#side_box {
        width: 320px;
    }
}

このように320pxをハードコードするのは理想的ではありませんが、さまざまなCSSメディアクエリを使用したり、JavaScriptからデバイス幅を取得することで、これを向上させることができます。