글꼴 크기가 화면 크기에 따라 예기치 않게 크기가 변경됨
4 차원
이 문제의 원인은 모르겠지만 그리드 컨테이너, ul 및 li 텍스트의 일부 조합이 컨테이너보다 넓 으면 텍스트의 글꼴 크기가 스마트 폰 또는 Chrome 전화 시뮬레이션의 화면 크기로 커집니다. 이것은 물론 텍스트가 페이지의 나머지 부분에 비해 불균형하게되어 어떤 디자인이든 거의 깨뜨립니다.
내가 말할 수있는 한 이것은 문제를 복제해야합니다.
<html lang="sr">
<head>
<meta charset="utf-8"/>
<style>
body {
margin: 0;
font-style: normal;
font-family: Robo, Arial, Helvetica, sans-serif;
font-size: 16px;
display: grid;
grid-template-columns: 300px auto;
}
.nav {
margin: 0;
padding: 5px;
grid-column: 1;
background-color: yellow;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
</style>
</head>
<body>
<div class="nav">
<p><a href="#">THis is a test text to show when and how this effect happens.</a></p>
<p>THis is a test text to show when and how this effect happens.</p>
<p><a href="#">THis is a test text to show when and how this effect happens.</a></p>
<ul>
<li><h3>Test</h3>
<ul>
<li>ABC</li>
<li><a href="#" >THis is a test text to show when and how this effect happens.</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
이 페이지를 컴퓨터에서 열면 다음과 같이 표시됩니다.
하지만 Chrome 관리자에서 기기 모드로 전환하고 너비를 줄이면 다음과 같은 결과가 나타납니다.
스마트 폰에서 페이지를 볼 때도 마찬가지입니다.
Inspector는 예를 들어 ABC 항목이 글꼴 크기가 16px 여야하지만 어떤 이유로 항목의 높이가 49px라는 것을 보여줍니다.
그래서, 여기서 내가 놓친 완전히 명백한 것은 무엇입니까?!?
user9643348
뷰포트를 설정하지 않았기 때문입니다. 이것을 머리에 추가하십시오.
<meta name="viewport" content="width=device-width">
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
에서 수정
관련 기사
Related 관련 기사
- 1
iOS의 글꼴 크기가 예기치 않게 변경됨
- 2
글꼴 크기가 변경되면 Div 크기가 조정 됨
- 3
화면에서 글꼴 크기 변경
- 4
글꼴 크기에 따라 UILabel 크기를 어떻게 변경합니까?
- 5
Xcode의 시스템 글꼴 크기에 따라 레이블의 글꼴 크기를 변경하려면 어떻게해야합니까?
- 6
Xcode의 시스템 글꼴 크기에 따라 레이블의 글꼴 크기를 변경하려면 어떻게해야합니까?
- 7
Mac에서 글꼴 크기에 따라 Tkinter Button의 크기가 올바르게 조정되지 않음
- 8
UITextView에 맞게 글꼴 크기 변경
- 9
셀 값에 따라 글꼴 및 색상 크기 변경
- 10
jQuery : 슬라이더가 활성화 되 자마자 글꼴 크기 변경-어떻게?
- 11
Python-글꼴 크기를 변경할 때 Tkinter 버튼 크기가 변경됨
- 12
가상 콘솔을 사용할 때 화면 글꼴 크기를 어떻게 변경합니까?
- 13
가상 콘솔을 사용할 때 화면 글꼴 크기를 어떻게 변경합니까?
- 14
가상 콘솔을 사용할 때 화면 글꼴 크기를 어떻게 변경합니까?
- 15
화면 크기에 따라 앵커 창 크기 조정 가능
- 16
화면 보호기 글꼴 크기 변경, 분자 xscreensaver
- 17
PIL 글꼴 크기가 변경되지 않음
- 18
UITableViewCell 글꼴 크기가 변경되지 않음
- 19
iOS : 크기에 따라 크기 클래스가 변경되지 않음
- 20
iOS : 크기에 따라 크기 클래스가 변경되지 않음
- 21
웹 사이트의 현재 화면 크기에 맞게 글꼴 크기 조정
- 22
목록을 스크롤 할 때보기가 예기치 않게 변경됨
- 23
스크롤 후 iOS, UITableView, 들여 쓰기가 예기치 않게 변경됨
- 24
줄 수 및 글꼴 크기에 따라 RichTextBox 크기 조정
- 25
scenePhase가 예기치 않게 변경됨
- 26
모바일 웹킷에서 글꼴 크기가 예기치 않게 증가합니다.
- 27
DPI가 변경 될 때 글꼴 크기가 변경되지 않음
- 28
scrollView contentOffset y가 변경되면 글꼴 크기를 어떻게 동적으로 변경합니까?
- 29
TeraTerm에서 글꼴 크기를 변경하려면 어떻게합니까?
몇 마디 만하겠습니다