0

私はいくつかのCSSとHTMLを持っており、font-size明示的に13pxにスタイル設定されており、ほとんどの場合そのようになっていますが、Nexus7のChromeが14pxと同じページの一部を表示することがあります。

残念ながら、jsfiddleで問題を再現できなかったため、何が起こっているのかわかりません。

フォントファミリーとフォントサイズに影響を与えるために使用するスタイルが、 http：//jsfiddle.net/K9hyG/2/で問題を再現しようとしたときに見られる場合があります。

Chromeデバッガーを使用すると、問題のある段落の1つについて、計算されたスタイルで次のことがわかります。

border-collapse: separate;
color: rgb(51,51,51);
display: block;
font-family: Optima, Lucia, 'MgOpen Cosmetica', 'Lucida Sans Unicode', sans-serif;
font-size: 14px;
    font[size="2"] - 13px   default.aspx:427
    body - 13px             default.aspx:2
height: 36px;
text-align: left;
text-shadow: rgb(255,255,255) 0px 1px 0px;
width: 877px;

テキストシャドウは、jQueryMobileの使用によって生成されます。Chromeデバッガーでは、text-shadowディレクティブの2つのインスタンスが表示されます。1つはdiv.ui-page.ui-body-c.ui-page-active（ui-body-cはアクティブ化コンポーネント）から継承され、もう1つはbody.ui-mobile-viewport.ui-overlay-cから継承されます（ ui-overlay-cはアクティブ化コンポーネントです）が、テーマファイルのCSSの同じセクションからの両方の定義。

それらの1つを非アクティブ化すると、問題の段落は実際にはChromeデバッガーで13pxに変更されますが、デバイス上では同じように見えます。Chrome Debuggerで両方が無効になっている場合は、14pxに戻ります。text-shadowが。に設定されている場合でも、これは引き続き発生しrgb(255,255,255) 0px 0px 0pxます。

私はこの投稿を見ましたが、その問題もほとんど解決されていません。

4

3 に答える 3

10

私の同僚が答えを発見しました。私は知らず知らずのうちにFont Boostingの犠牲者になっているようです

リンクに従って、問題の要素またはすべてmax-height: 1000000pxの要素に onを指定することで、Font Boosting を無効にすることができます。body, body *

于 2013-03-07T02:09:23.173 に答える
2

問題は、ユーザー補助の理由でテキストを特定のスケールに設定するChromeのテキストスケーリング設定が原因である可能性があります。多くのユーザーがこれを使用して、携帯電話で小さなテキストを読むのに苦労しています。これを修正することはできず、特にモバイルデバイスをサポートするサイトでは解決を試みるべきではありません。

Chromeのアクセシビリティオプション

無視するか、CSSを変更してわずかに異なるテキストサイズをサポートするようにすることをお勧めします。

于 2013-03-07T01:27:27.173 に答える
0

いくつかのテストの後、このルールは私を助けてくれました。div/table 構造に応じて、ブーストされたテキストを含む要素またはその親のいずれかに追加する必要があります。

element or parent element { 
    /* prevent font boosting on mobile devices */
    width: 100%;
    height: auto;
    min-height: 1px;
    max-height: 999999px;
}

必要に応じて、幅と高さの値を修正する必要があるかもしれません。

于 2013-03-22T18:55:48.750 に答える