Chrome for Mobileで段落テキストが縮小されるのはなぜですか？

Chrome/Androidと他の携帯端末のChromeで問題が発生しています。これまでのNexus 5xでしかテストできませんでした。私はHandlebars.jsを使って段落タグの中に引用符を動的に表示しています。表示された見積もりがの3つの行未満になると、font-sizeは縮小されます。私はこのフォントのサイジングの問題をデバッグするのに苦労しています。これはChrome for Mobileで起きているようだからです。問題は、Chrome開発ツールの応答モードでを複製しません。フォントのサイズ変更は、IOS SafariまたはFirefox Mobileでが発生しません。Chrome for Mobileで段落テキストが縮小されるのはなぜですか？

モバイルデバイスにChromeを搭載している場合は、ゲームを終わらせて問題があるかどうか確認してください。ここでLINK HERE

は、フォントサイズの変更を示すビデオです：ここではvideo of problem

は、問題を説明するサイド・バイ・サイド2枚の写真です。左の写真でのフォントは、右の写真のフォントよりも大きい。ここで

サイト（link to repository）のそのセクションのコードです：

#game-screen { 
 
    margin-top: 2%; 
 
    @media (max-width: 550px) { 
 
    margin-top: 4%; 
 
    } 
 
    #game-quotes { 
 
    width: 90%; 
 
    margin: 0 auto; 
 
    @media (max-width: 550px) { 
 
     width: 95%; 
 
    } 
 
    p { 
 
     font-size: 3.6rem; 
 
     @media (max-width: 750px) { 
 
     font-size: 2.4rem; 
 
     } 
 
     @media (max-width: 550px) { 
 
     font-size: 1.4rem; 
 
     } 
 
    } 
 
    } 
 
}

<div id="game-screen"> 
 
    <div id="game-pictures"> 
 
    </div> 
 
    <div id="game-quotes"> 
 
    <h6 class="center">Quote {{counter}}/10</h6> 
 
    <p>"{{content}}"</p> 
 
    </div> 
 
</div>

誰かがこのフォントサイズ変更を引き起こしているかもしれないアイデアを持っていますか？

ご協力いただけると助かります。

Link to Repository

編集：私を助けた人あなたのすべてに感謝！

出典

2017-10-01 Joel Hoelting

興味深いもの。フォントサイズに他のユニットを使用しようとしましたか？例えば 'px'？ – Morpheus

私はあなたのウェブサイトを見て、私は問題を指摘することはできません。あなたはより良い方法でそれをクリアしていただけますか？ –

@Morpheus：pxはまだ同じことをしていますが、これを引き起こしている他のCSSのものがなければならないのですが、なぜクロームモバイルのみですか？ –

携帯電話の設定でChromeのフォントサイズが100％であることを確認できますか？ Android用Chromeには、フォントを別の値でレンダリングするオプションがあります。このオプションはメニュー - >設定 - >アクセシビリティで見つけることができます。私は数週間前にこのような間違いを犯しました、そして、私はここでそれが事実でないことを確かめたいと思います。申し訳ありませんが私はここにラインから外れている場合。

私はまた、いくつかの不明な理由により、Android用のChromeがインストール時にこのフォント設定を間違って設定することがあることも発見しました。私はこの動作を再現することができませんでしたが、私は親戚の電話を1つ持っていましたので、この設定が100％に設定されていないという事実を認識していない可能性があります。私は、次を使用する傾向がある私のWebページの相互互換性のため

出典

2017-10-12 07:54:44 Cheesy

すべての段落を選択するために段落セレクタの後に*を追加しました。多分これはあなたの問題を解決するでしょう。それが働いていた場合、私は結果を知りたい、教えてください:)

#game-screen { 
 
    margin-top: 2%; 
 
    @media (max-width: 550px) { 
 
    margin-top: 4%; 
 
    } 
 
    #game-quotes { 
 
    width: 90%; 
 
    margin: 0 auto; 
 
    @media (max-width: 550px) { 
 
     width: 95%; 
 
    } 
 
    p *{ 
 
     font-size: 3.6rem; 
 
     @media (max-width: 750px) { 
 
     font-size: 2.4rem; 
 
     } 
 
     @media (max-width: 550px) { 
 
     font-size: 1.4rem; 
 
     } 
 
    } 
 
    } 
 
}

出典

2017-10-06 13:58:30 MultiDutch

これは何の効果もありませんでした。モバイルChromeで問題を再現できましたか？ –

'私はあなたの段落セレクタの後ろに*をつけて、段落のすべてを選択しました....それは*何もしません。 https://css-tricks.com/almanac/selectors/u/universal/ –

をこれはあなたの質問への答えであれば、私はよく分からないが、私はCSSのために、これは一貫した見つける：

を

body { 
    /** Setting the 'font-size' property of the <body> to 62.5% 
    * allows you to use the 'em' measurement as you would in 'px' form. 
    * ...hope that's clear. 
    */ 
    font-size: 62.5%; 
} 

#someDivInBody { 
    font-size: 1.65em; /* or '16.5px' by CSS */ 
}

は、この方法では、私がpxではなく、より一貫性とコントロールと同じように、私はem測定を使用することができました。

出典

2017-10-07 15:22:48 Oluwafunmito

remユニットはpxまたはemと異なります。ウィンドウのサイズを変更すると、remを使用すると、テキストとウィンドウサイズの比率が同じに保たれます。 emまたはpxを使用して問題を解決してください。

出典

2017-10-08 04:29:10

しかし、ウィンドウのサイズが変更されていないので、font-sizeも変更しないでください。私はpxとemで試しましたが、問題を修正しません。サイズ変更が開発ツールでは発生しないため、イライラしているので、私はそのツールの根幹に到達できません。 –

これは、電話機またはタブレットの解像度が原因である可能性があります。デバイスに関係なく、同じサイズを維持するようにWebページをカスタマイズすることが最善の方法です。

はあなたがすべてに適用するには、このために身体クラスにこれを適用する必要がありますmax-width:解像度;

を使用してみてください。

I.E.

`.body {`<br> 
` max-width: 3840px;` /*4K resolution, for 4K displays*/

このはテキストの問題を修正する必要があります。そうでない場合は、https://www.w3schools.comまたはhttps://developer.mozilla.org/en-US/を参照してください。それはあなたを助けることができるかもしれません。

出典

2017-10-11 14:37:44 EgMusic

MDNはw3schoolsよりはるかに優れています。 – meagar

@meagarこのウェブサイトを含むように私の投稿を編集しました – EgMusic

：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

これは、モバイルプラットフォームのために必要なCSSとなし、追加のスタイリングで動作するようです。あなたが何を望むかわからない。

出典

2017-10-12 16:55:50

Chrome for Mobileで段落テキストが縮小されるのはなぜですか？

答えて

関連する問題