iOS의 텍스트 크기가 잘못 표시되었습니다.

iOS Safari의 텍스트 크기에 문제가 있습니다. 모든 텍스트의 크기는 같지만 iOS에서는 다양한 크기로 표시되지만 Chrome에서는 표시되지 않습니다.iOS의 텍스트 크기가 잘못 표시되었습니다.

<!DOCTYPE html> 
<html> 
    <head> 
     <meta name="viewport" content="width=1024" /> 
     <style> 
      .content 
      { 
       width: 984px; 
       margin: 0px auto; 
      } 
      .left 
      { 
       float: left; 
       width: 165px; 
       border-right: 1px solid #e0e0e0; 
      } 
      .page 
      { 
       margin: 0px 0px 80px 180px; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="content"> 
      <div> 
       <div class="left"> 
        <div class="portrait">TEST TEST TEST</div> 
       </div> 
       <div class="page"> 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
        incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis 
        nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu 
        fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
        culpa qui officia deserunt mollit anim id est laborum. 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

불행하게도,이 jsFiddle에 표시 할 수 없습니다, 그래서 당신은 HTML 파일로이 작업을 저장하고 구글 크롬에서 열 수 있습니다. 개발자 도구 (F12)를 사용하고 장치 모드로 들어가서 장치 너비를 변경하면 텍스트가 커집니다!

보통 크기

Normal size

작은 장치 폭

당신은 오른쪽에 텍스트가 왼쪽보다 큰 것을 알 수있다. 이것은 내 문제의 원인입니다.

Smaller device width

어떻게

이 고정 될 수 있는가?

출처

2015-01-07 bytecode77

뷰포트가 문제의 원인입니다. 다음과 같이 변경하면 글꼴 크기가 올바르게 조정됩니다. 메타 태그를 일으키는처럼

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

출처

2015-01-07 19:41:17

아니요, 여전히 동일합니다. – bytecode77

글꼴 크기를 지정하려고 시도해 보셨습니까? 글꼴 크기가 할당 된 것처럼 보이지 않습니다. –

예, 시도했습니다. 이 코드는 제가 고치려고하는 웹 사이트의 최소한의 예입니다. 나는이'-webkit-text-size-adjust'를 다른 곳에서 본 적이 있는데 전에 시도해 보았지만 작동하지 않습니다. Chrome에서 사용해보고보세요. – bytecode77

보인다. width=device-width이 아닌 <meta name="viewport" content="width=1024" />으로 설정 한 이유가 있습니까?

출처

2015-01-07 20:02:36 soba3

예. 왜냐하면 저는 1024px의 고정 너비를 가진 레이아웃을 사용하기 때문입니다. 이것은 모바일 장치가 원하는 너비가 무엇인지를 "아는"것입니다. – bytecode77

특정 div의 글꼴 크기를 추가해야합니다. 또한 미디어 쿼리를 추가하십시오.

.content { 폭 : 984px; 여백 : 0px 자동; 글꼴 크기 : 13px;

 } 
     .left 
     { 
      float: left; 
      width: 165px; font-size:15px; 
      border-right: 1px solid #e0e0e0; 
     } 
     .page 
     { 
      margin: 0px 0px 80px 180px; font-size:13px; 
     }

출처

2015-01-08 11:42:55 anji

iOS의 텍스트 크기가 잘못 표시되었습니다.

답변

관련 문제