1

レスポンシブ サイトを開発していますが、モバイル デバイスを持っていません。（いわば暗黒時代を生きている）とにかく、同僚からiPadでサイトのスクリーンショットが送られてきました。

行頭/行の高さはひどいですが、通常の Safari では問題なく表示されます。関連する（私が思う）CSSの一部を次に示します。

@font-face {font-family: 'Rubrik-Regular';src: url('fonts/237360_5_0.eot');src: url('fonts/237360_5_0.eot?#iefix') format('embedded-opentype'),url('fonts/237360_5_0.woff') format('woff'),url('fonts/237360_5_0.ttf') format('truetype'); font-style: normal; font-weight: normal; }
@font-face {font-family: 'Rubrik-Medium';src: url('fonts/237360_6_0.eot');src: url('fonts/237360_6_0.eot?#iefix') format('embedded-opentype'),url('fonts/237360_6_0.woff') format('woff'),url('fonts/237360_6_0.ttf') format('truetype'); font-style: normal; font-weight: bold; }
@font-face {font-family: 'Rubrik-Bold';src: url('fonts/237360_7_0.eot');src: url('fonts/237360_7_0.eot?#iefix') format('embedded-opentype'),url('fonts/237360_7_0.woff') format('woff'),url('fonts/237360_7_0.ttf') format('truetype'); font-style: normal; font-weight: bold; }

html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;} 

html{font-size:81.25%;-webkit-text-size-adjust:81.25%;-ms-text-size-adjust:81.25%}  /* shrink to ~13px body font without changing all other sizes */
/* 16px base font size with 162.5% (26px) line height */
body, button, input, select, textarea { font: 1em/1.6154em 'Rubrik-Regular', Arial, Verdana, sans-serif; color: #262626; }

並べて比較すると次のようになります。

モバイルとデスクトップの Safari

ライブデモリンク

行の高さが尊重されないのはなぜですか?

4

1 に答える 1

0

これで解決したようです：

html{ font-size: 16px; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%}

私は誤ってフォントサイズを次のように調整しようとしました:

html{ font-size: 82.5%; -webkit-text-size-adjust:82.5%; -ms-text-size-adjust:82.5%}

そして、サイズ調整パラメーターは、モバイル デバイスでの私のタイポグラフィをこっそり殺していました。

于 2013-01-09T12:29:22.977 に答える