私はこの質問を聞いていませんが、私は把握できなかったネストされたhtmlリストのフォントサイズに問題があります。この問題は、自分の携帯電話でWebページを開くときにのみ表示されます。 Android用Chrome、iPad(SafariとChromeを使用)、ノートパソコンを使用して携帯電話でWebページをテストしました。問題は携帯電話にのみ表示されます。ネストされたhtmlリスト(モバイル)で奇妙なフォントサイズの動作
私は次のコードを持っている:上記のコードでテキストの特定の変動を
<html>
<head>
<title>Test</title>
<style >
#body-text {
font-size: 15px;
line-height: 1.5em;
max-width: 90%;
margin: auto;
}
#body-text ul {
list-style-type: disc;
}
#body-text ul > li {
list-style-position: outside;
}
#body-text ul > li > ul {
list-style-type: circle;
}
#body-text ul > li > ul > li {
list-style-position: outside;
}
</style>
</head>
<body>
<div id="body-text">
<p style="margin-bottom:5px;">Check this list: </p>
<ul>
<li>This is parent 1 (details 1):
<ul>
<li>This is child 1, long text here (more long text here too).</li>
<li>This is child 2, long text here (more long text here too).</li>
</ul>
</li>
</ul>
<ul>
<li>This is parent 2 (details 2):
<ul>
<li>This is child 3, long text here (more long text here too).</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
を、Iは、異なるフォントサイズを得ます。たとえば、私がライン<li>This is child 2, long text here (more long text here too).</li>
にコメントするか、それをもっと短くするだけです。 <li>This is child 2, long text here.</li>
、目的のフォントサイズ(15)を取得します。しかし、そのままのコードではフォントサイズが大きくなります。
問題は、リストがこの動作を持つWebページの唯一の部分であることです。 Webページの他の部分(ここには含まれていません)は、意図したフォントサイズのまま残ります。
何が起こっているかについてのアイデアはありますか?
try#body-text li {font-size:15px} –
メタビューポート[MDN](https://developer.mozilla.org/en-US/docs/Mozilla/)を追加していないようです。モバイル/ Viewport_meta_tag)は素敵な記事です。 – Stickers
@Panglossメタビューポートは、すべてのWebページのスタイルを一貫させます。しかし、それが機能するためには、私はモバイルデバイス(またはより小さい画面)用のレイアウトを指定する必要がありますが、これは私の場合ではありません。私はその余分なオプションがないので、メタビューポートを使用するとサイトは完全に混乱します。 –