2017-12-12 30 views
1

親コンテナ 'foo'にcss 'height'プロパティを設定すると、内部要素の計算された 'font-size'が間違って変更されます。これはChromeのモバイルデバイスでのみ発生します。その後、無効モバイルクロム: 'height'プロパティを使用しているときに 'font-size'が正しくありません

<!DOCTYPE html> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Test</title> 
 
    <style> 
 

 
     .foo { 
 
      height: 600px; 
 
      color: white; 
 
      background: teal; 
 
     } 
 
    </style> 
 
</head> 
 
<body> 
 
     <section> 
 
      <h2>Header in first section</h2> 
 
      <p>Text with a normal size. Text with a normal size.</p> 
 
     </section> 
 
     <section class="foo"> 
 
      <h2>Header in second section</h2> 
 
      <p>This text changes size when commenting out 'foo's height property in the Chrome developer console and mobile mode (e.g Galaxy S5) - but why?</p> 
 
     </section> 
 
</body> 
 
</html>

(コメントアウト)「高さ」プロパティ:このクロームの下に次のコードを実行しようとデベロッパーコンソールで任意のモバイルデバイスを選択してくださいをテストする

クラス 'foo'で。 p要素の計算された 'font-size'は変更しないでください。

ドキュメント自体の '高さ'プロパティをコメントアウトしてページを再読み込みすると( - > p要素のテキストが通常より大きい場合)、Chromeでも間違ったサイズが表示されます。

私を助けてください - これは報告する必要があるバグですか?

答えて

0

モバイルブラウザがテキストサイジングをどのように処理するかは、これが既知の問題です。 text-size-adjustを参照してください。これにはいくつかのオプションがあります。

  1. <meta name="viewport" content="width=device-width, initial-scale=1">
  2. 1pxのの分の高さや99999の最大の高さを設定する実験的な性質で
  3. 作業は、一部のモバイルデバイス上でレイアウトを破るだろうと思われます。 (投稿:Chrome on android resizes fontを参照)
関連する問題