텍스트의 글자 수에 따라 글씨 크기가 달라집니다.
본문
<?php
$mb_7 = '2022-03-22 11:11:11';
?>
<form method="post" style="font-size: 60px">
<p style="text-align:center;">글씨 크기 테스트용 [제목]</p>
<div style="font-size: 40px; text-align: center;">테스트 일이삼사오육칠팔구십 : <?php echo $mb_7 ?> </div>
<br>
<p style="font-size: 40px; color: red">테스트 일이삼사오육칠팔구십<br> 일이삼사오육칠팔구십 : <?php echo $mb_7 ?> <br></p>
</form>
위 코드를 모바일에서 실행하면
글씨 크기 테스트용 [제목] 이 있을때와 '[제목]' 이 없을때와 글씨 크기가 달라집니다.
이유가 뭔지 모르겠네요.
예를 들기 편하게 [제목]을 붙였지만 위코드에서 어디든지 간에 한글로 쓴 텍스트의 글자수가 많거나 적거나에 따라 글씨 크기가 달라집니다.
헤매고 헤매다가 글자수가 크기에 영향을 준다는걸 알았네요. 위 코드는 해당 현상이 일어나는 부분만 따로 떼서 샘플로 만들었습니다.
[제목] 이 있을경우
[제목]이 없을경우
답변 3
뷰포트 스케일을 지정하지 않아서 그런겁니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
제일 상단에 위 코드 입력 후 글자수에 따른 폰트크기 변화가 있는지 채크해보세요.
뷰포트 선언 후 글자수 상관없이 폰트크기는 동일할거에요
위에서 글자수마다 폰트사이즈가 다른 이유는
뷰포트 선언이 안되어 있어서 브라우저에서 폰트 크기에 따라 가변으로
전체적은 뷰포트 스케일이 지정되었던거에요.
주소를 공개하셔야 도움을 받을 수 있는 질문 같네요.
F12키로 해당 부분에 영향을 미치는 선택자를 체크해 보세요.
저 코드가 다에요....
http://youfeel.dothome.co.kr/index.php <=[제목] 없는거
http://youfeel.dothome.co.kr/index1.php <=[제목] 있는거
크롬으로 창크기 줄이며 확인해 봤는데, 크기는 똑같습니다.
PC에서는 잘 돼요..
모바일에서 만 나타나는 현상이에요.
1. 해당 페이지에서 폰트 사이즈 관련 스타일을 모두 지워보세요.
2. 그리고 f12 누르셔서 폰트 사이즈 스타일이 어디에서 로드되는지 채크해보세요.
위 두가지 우선 채크해보셔야합니다.
그리고 어디가 문제인지 모를때는 URL 공개는 필수 입니다.
위 스샷만으로는 어디가 문제인지 몰라요.
대략 유추하건데 디바이스 폭에 비례하여 폰트크기가 할당되어있을거에요.
저 코드가 다에요....
http://youfeel.dothome.co.kr/index.php <=[제목] 없는거
http://youfeel.dothome.co.kr/index1.php <=[제목] 있는거
