0
이 질문을하는 것이 바보 같지만 중첩 된 HTML 목록의 글꼴 크기에 문제가있어 알아낼 수 없습니다. 문제는 휴대 전화에서 웹 페이지를 열 때만 나타납니다. Android 용 Chrome, iPad (Safari 및 Chrome 사용) 및 노트북을 사용하여 휴대 전화에서 웹 페이지를 테스트했습니다. 문제는 휴대 전화에만 나타납니다.중첩 된 HTML 목록 (모바일)의 이상한 글꼴 크기 동작
I는 다음과 같은 코드가 :
<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)를 얻는다. 그러나 코드가 그대로 있으면 글꼴 크기가 커집니다.
문제는 목록이이 동작을하는 웹 페이지의 유일한 부분이라는 것입니다. 웹 페이지의 다른 부분 (여기에 포함되지 않음)은 의도 한 글꼴 크기로 유지됩니다.
무슨 일이 일어나고 있는지 아이디어가 있으십니까?
시도해보십시오. body-text li {font-size : 15px} –
메타 뷰포트 [MDN] (https://developer.mozilla.org/en-US/docs/Mozilla/)를 추가하지 않은 것으로 보입니다. 변하기 쉬운/ Viewport_meta_tag)에 멋진 기사가 있습니다. – Stickers
@Pangloss 메타 뷰포트는 모든 웹 페이지의 스타일을 일관되게 만듭니다. 그러나 그것이 작동하려면 모바일 장치 (또는 작은 화면)에 대한 레이아웃을 지정해야합니다. 이는 제 경우는 아닙니다. 추가 옵션이 없기 때문에 메타 뷰포트를 사용할 때 사이트가 완전히 혼란스러워집니다. –