9

Asus Nexus 7（jQueryMobileで記述）でWebページを実行しています。CSSでフォントサイズを14pxに設定しましたが、デバッグ中（PCでChromeを使用）、計算されたサイズが22pxであることがわかります。

HTMLコードは次のようになります。

<div data-role="content" class="ui-content" role="main">
    <div id="summaryContent">
        <div class="contentPanel">
            <div class="header">
                Some nice info with 14px
            </div>
            <div class="content">
                <div class="headerText">
                    Text with size of 22px (but should be 14px)
                </div>
                <div class="element">
                    Text with size of 22px (but should be 14px)
                    <span class="dateInfo"> 30.11.2012</span>
                </div>
                <div class="element">
                    Text with size of 22px (but should be 14px)
                    <span class="dateInfo"> 2012</span>
                </div>
                <div class="element">
                    Text with size of 22px (but should be 14px)
                    <span class="dateInfo"> 1981</span>
                </div>
                <div class="headerText">
                    Text with size of 22px (but should be 14px)
                </div>
                <div class="element">
                    Text with size of 22px (but should be 14px)
                </div>
                <div class="element">
                    Text with size of 22px (but should be 14px)
                </div>
            </div>
        </div>
    </div>
</div>

divは14pxですが、次のclass="header"divは22pxです。

CSSコード：

.contentPanel > div
{
    padding: 10px;
    font-size: 14px;
}


.contentPanel div.header,
{
    font-weight: bold;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.contentPanel div.content
{
    color: #000000;
    border-radius: 0px 0px 5px 5px;
    border-bottom: 1px solid #B5B5B5;
}

.contentPanel div.content div.element {
    padding: 10px 10px 10px 0px;
    display: inline-block;
}
.contentPanel div.content span.dateInfo {
    color: #7a7a7a;
}

.headerText {
    color: #454545;
    font-weight: bold;
}

テキストスケーリングが100％であることを確認しました。Asus Nexus 7のバグですか？14pxにすることは可能ですか？iPadとSamsungGalaxyTabでは、すべて問題ありません。

2012年11月20日更新：

提案された変更を行いましたが、役に立ちませんでした。JavaScriptのコードは次のように機能します。

  • JSでHTMLを作成します

  • 次に、この新しく作成されたHTMLをDOMに挿入します

  • この時点（ページを変更する前）では、Chromeデバッガー（Nexusに接続されている）で14pxが表示されます。
  • 次に、jQueryMobile changePage（）が呼び出され、フォントサイズが変更されます。

2012年11月20日更新＃2

jQueryMobileは、画面に表示されるはずのDOMツリーの部分にクラスui-page-activeを適用します。

CSS：

.ui-mobile .ui-page-active { display: block; overflow: visible; }

このクラスを適用する前のフォントサイズは14pxですが、適用後は18pxまたは22pxに増加します。時々それはうまくいきます。iPadとSamsungGalaxyTabで確認しましたが、正常に動作します。

ページに再度入ると、フォントサイズが14pxに戻ることがあります。これは、デバイスの回転中にも同様のことが起こります。

4

6 に答える 6

24

これはFont Boostingと関係があるかもしれません。

特定の要素を無効にするmax-height: 1000000pxには、要素、親要素、または祖父要素を指定します。

または、

body, body * {
    max-height: 1000000px;
}

ページ全体で Font Boosting を無効にします。

于 2013-03-07T02:12:01.657 に答える
4

あなたの質問に対する潜在的な回答をここに投稿しました。

この問題は、アクセシビリティ上の理由から特定の縮尺でテキストを設定する Chrome のテキスト スケーリング設定が原因である可能性があります。モバイルで小さなテキストを読むのに苦労している多くのユーザーがこれを使用しています。特にモバイル デバイスをサポートするサイトでは、これを修正することはできず、解決しようとするべきではありません。

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

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

于 2013-03-07T02:06:24.113 に答える
1

CSSコードがないと答えるのは非常に困難です。

親要素から継承されている可能性があります。Firebug または Google Chrome のコンソール (F12 を押す) を使用してそれを行い、div を参照します。

また、css ルールで !important を使用して、属性の使用を「強制」することもできます。

.fontsize14px {
   font-size: 14px !important;
}

また、プロパティまたはクラス名を正しく記述したかどうかも確認してください。場合によっては、タイプミスだけが問題になることもあります。

于 2012-11-16T14:42:41.917 に答える
1

フォント ブースティングに問題がある場合は、ビューポートがメタデータに設定されていることを確認してください。

<meta name="viewport" content="width=device-width, initial-scale=1.0">
于 2018-05-27T11:37:22.683 に答える