2016-04-21 2 views
0

奇妙なChromeの「機能」がわかりません。レスポンシブデザインでfieldsetを使用すると、フィールドセット内のテキストがページの他のコンテンツと比較して非常に大きく表示されることがあります。モバイルデバイスでフィールドセット内のテキストが表示されることがあるのはなぜですか?

私はテキストから数文字を削除すると、それは突然、ページ上の他のブロックと同じサイズになります。

たとえば、次のページは、デバイスモードを使用してChromium 49によって生成されます。 Chromeを実行しているAndroidスマートフォンでは、表示が非常に似ています。レスポンシブデザインモードのFirefoxには不具合がありません。

enter image description here

これはthe corresponding codeです。外部CSSファイルはありません。コードのこの部分で

<html> 
<head> 
<style> 
body{font-size:.8em;} 
</style> 
<body> 
<div> 
    <p> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porta sus 
cipit ultricies. 
     Sed velit quam, viverra eget accumsan dapibus, finibus eu lorem. 
     Vestibulum aliquam, neque sed ullamcorper tristique, arcu augue condimen 
tum orci, id vulputate nisl mauris non mas. 
    </p> 
    <fieldset> 
     <p> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porta 
suscipit ultricies. 
      Sed velit quam, viverra eget accumsan dapibus, finibus eu lorem. 
      Vestibulum aliquam, neque sed ullamcorper tristique, arcu augue cond 
imentum orci, id vulputate nisl mauris non mas. 
     </p> 
    </fieldset> 
    <fieldset> 
     <p> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porta 
suscipit ultricies. 
      Sed velit quam, viverra eget accumsan dapibus, finibus eu lorem. 
      Vestibulum aliquam, neque sed ullamcorper tristique, arcu augue cond 
imentum orci, id vulputate nisl mauris non ma. 
     </p> 
    </fieldset> 
</div> 
</body> 
</html> 

、ページの最初<p>及び第<fieldset>内の一つは、同じテキストを含みます。 2番目の段落には1文字少ない文字列が含まれています。

何が起こっていますか?醜い回避策は、スタイルでfieldset{font-size:.999em;}を指定から成る

注意。 3つの段落がすべて同じように見えるようにします。これは、私はこの回避策/ハックではなく、この機能/グリッチの起源についてより興味を持っていると言われています。

答えて

0

この現象は仕様であることがわかりました。ブロックの内容に応じてフォント・サイズを調整するためにデバイス・モードでAndroidやクロムのChromeを防止するために、以下のメタ要素を追加しなければならない

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

出典:Joe DeRose's answer類似の質問。

さらに読書:MDNでUsing the viewport meta tag to control layout on mobile browsers

関連する問題