web-dev-qa-db-ja.com

iPhoneでのフォントサイズのレンダリングの不整合

私は自分のウェブサイトをテストしており、すべてのブラウザーで正常に動作しています。ただし、iphoneブラウザー（モバイルSafariと思いますか？）は、他のテキストよりも大きなフォントでテキストをレンダリングします。 CSSを手でチェックし、ページでfirebugを使用しました。すべてのCSSに同じサイズを使用したことを確認できます。どうすれば修正できますか？

iphonecssbrowserfontsmobile-safari
49
Terix

Lukaszのアイデアを少し改善するには、CSSで次のルールを使用してみてください。

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

「なし」ではなく「100％」の値を使用すると、ズーム機能を使用するときに、元のフォントサイズを維持したまま、他のすべてのWebkitベースのブラウザーでテキストのサイズを変更できます。

この問題は、サファリなどの最新のブラウザでのみ発生します。iPhoneデバイスではopera。

このスタイルに-webkit-text-size-adjust：100％;または-webkit-text-size-adjust：none;を追加します必要なクラスでは正常に動作します。例：リクエストがモバイルから送信された場合にのみ条件が適用されるようにします。したがって、要件を満たす完全なナビゲーションパスを追加しました。

.mobile-phone .authenticated-page.authenticated.mobile-community.mobile-document .notification .notification-dialog.content-frame 
{
    -webkit-text-size-adjust: none;
}

または

.mobile-phone .authenticated-page.authenticated.mobile-community.mobile-document .notification .notification-dialog.content-frame {
-webkit-text-size-adjust: 100%;

}両方とも正常に動作します。完全なボディにスタイルを適用する必要はありません

166
user612626

Mobile Safariは、デフォルトで画面上で読みやすいようにコンテンツを調整しようとします-他のブラウザとは異なるデフォルトスタイルを持っています。

正確なルールはわかりませんが、フォントサイズに関しては、次のように機能するようです。

  • 段落内のテキスト、リスト項目、またはその他の「テキスト」要素：適応せずに作成者のスタイルを適用します。

  • DIVまたはその他の非特定要素内のテキスト： Mobile Safariのルールに従って、サイズを「プレーンテキスト」として扱い、サイズを「調整」します。

だから-短い答えは、テキストを段落で囲み、それにフォントサイズの規則を適用することです。

簡単で汚い例を次に示します。

<!-- Recommended: Put this in an external stylesheet -->
<style type="text/css">
    p { font-size:10px; }
</style>

<div class="appro_body">
  <p>SAN BENEDETTO - Si è ufficialmente aperta la campagna elettorale per le 
    comunali di San Benedetto del Tronto 2011. Le elezioni regionali, oramai
    dietro le spalle, sembra siano servite più che per organizzare il 
    territorio in crisi, per muovere le pedine in Vista delle elezioni a 
    Sindaco.
    ...
    <a href="http://www.ilsegnale.it/it/news/approfondimento/1602/?tpl=502">Leggi tutto...</a>
  </p>
</div>

（明らかに、font-size CSSファイルのルール）。

22
Ben Hull

私はこれと同じ問題を修正しました：

<meta name="viewport" content="width=device-width">

HTML5Boilerplate 現在は here です

13
Keith Smiley

CSSにこのようなルールを追加すると、問題はなくなります。

body {
    -webkit-text-size-adjust: none;
}

編集： より良い解決策 、 ser612626 によって提供される、100%の代わりにnone。

12
Lukasz Korzybski

体を与えるfont-size:100%、「em」メソッドを使用して、ウェブサイトのすべての要素にフォントサイズを指定します。

これにより、フォントサイズがそれぞれのブラウザでデフォルトのフォントサイズの100％になります。たとえば、iPhoneのサファリブラウザーには12px = 1emがあります（オフコースでは、デフォルトのフォントサイズをローカルで確認する必要があります）。次に、フォントサイズを10ピクセルにしたい場合は、12で割るだけです。つまり、「0.83em」

理解し、「css em unit」を検索すると、より良い洞察が得られます。

4
Chandrakant