web-dev-qa-db-ja.com

テキストが一貫してレンダリングされず、一部のフォントが他のフォントよりも大きいMobile Safari（iPhone）のフォントサイズの問題を修正しますか？

私たちのサイトは、モバイルSafari上で一貫性のないフォントサイズでレンダリングされます。これは非常に困惑しています。

Firebugを使用してサイトを分析しましたが、間違った領域は適切なスタイルを継承していますが、フォントは依然として間違ったサイズでレンダリングされています。

1） http://www.panabee.com にアクセスします。

2）ドメイン名を検索します。

左側のボックスには、誤ったフォントサイズが表示されます。フォントサイズは右側のフォントサイズと一致する必要があります（ボックスタイトルとボックスコピーの両方）。たとえば、タイトル「Variations」および「Twitter」は、タイトル「Alternate Endings」よりもはるかに大きいです。

何か手がかりがありますか？

iphonecsslayoutmobilemobile-safari
70
Crashalot

Mobile Safari（Chrome Android、Mobile Firefox、およびIE Mobile）の場合、ワイドブロックのフォントサイズが（常に）増加します。 -ブロックを拡大するには（画面の幅に合わせてブロックを）タップすると、テキストが読みやすくなります。-webkit-text-size-adjust: 100%（またはnone）を設定すると、テキストを読み込めなくなります。これを行うと、ユーザーがダブルブロックでズームインしてワイドブロックにズームインすると、テキストは判読不能に小さくなります。ユーザーはピンチズームすると読むことができますが、テキストは画面よりも広くなり、テキストの各行を読むには水平方向にパンする必要があります！

  1. 理想的には、 レスポンシブWebデザイン 技術を使用してこれを修正し、モバイル画面サイズにデザインを適合させる（この場合、非常に広いブロックがなくなり、モバイルブラウザーはフォントを調整しなくなります）サイズ）。

  2. それが選択肢ではなく、モバイルユーザーにデスクトップサイトを提供することができない場合は、デザインを微調整して、テキストブロックがモバイルデバイスのデバイス幅（たとえば、多くのポートレート電話の場合は320ピクセル）を超えないように調整できるかどうかを確認してください）（モバイル固有のcssを使用してデスクトップブラウザーへの影響を回避できます）、Mobile Safariはフォントサイズを増やす必要がありません（およびAndroid Browser and = Operaモバイル。レイアウトを変更する必要もありません）。

  3. 最後に、本当にMobile Safariがフォントサイズを調整しないようにする必要がある場合は、-webkit-text-size-adjust: 100%を設定できますが、これは最後の手段は、モバイルユーザーがテキストを読みづらくする原因になる可能性があるためです。テキストが小さすぎるか、読み上げるたびに左右にパンする必要があるためです。 。 デスクトップブラウザーでは厄介な副作用はありません であるため、noneではなく100%を使用する必要があることに注意してください。また、モバイルFirefoxおよびIE Mobile。）に対応する-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からデバイスの幅を取得することで改善できます。

141
John Mellor

最終的に機能したのは次のとおりです（iPhone 4 thoでのみテスト済み）：

/* Mobile browsers only */
@media only screen and (max-device-width: 480px) {      
        td#main_box { -webkit-text-size-adjust:100% }               
}

彼の解決策がこの解決策の基礎であったため、ジョンに答えを与えました。

おそらく最もエレガントな答えではありませんが、うまくいきます。

38
Crashalot

-webkit-text-size-adjust: none;を使用すると、モバイルデバイスをズームインできなくなります。代わりに100%を使用する必要があります。

6
Webreality
-webkit-text-size-adjust:none;

おそらくあなたの問題を解決します。

target-element { -webkit-text-size-adjust:80% }

ズームしますが、ウェブキットのデフォルトよりも80％小さく保ちます。

3
Thomas Maas

私の場合、<p>要素を追加し、この問題を解決しました。

width: fit-content;

それに。 Safariモバイルでもこれを再現できました。

1
Christian Adam