스마트 폰에서 글꼴 크기가 일치하지 않습니다.

Question

스마트 폰에서 잘 보이도록 웹 페이지를 조정 중입니다. 이 페이지의 글꼴 크기를 지정할 수 있도록 CSS 파일에서 @media 섹션을 선언했습니다. 해당 미디어 섹션은 다음과 같습니다.

@media screen and (max-device-width: 640px) { 
    #TermsOfUse { 
     padding: 0 2em 0 2em; 
     margin-left: auto; 
     margin-right: auto; 
     color: #777; 
     font: small sans-serif; 
    } 

    #TermsOfUse p { 
     color: #777; 
     font-weight: bold; 
     font: small sans-serif; 
     padding-top: 1em; 
     padding-bottom: 1em; 
    } 

    #TermsOfUse #trademark_footer p { 
     font: xx-large sans-serif; 
    } 
} 

그러나 글꼴 크기가 일관되게 나타나지 않습니다. 나는 글꼴을 "작게"보여주기 위해 말했지만, 한 섹션은 훨씬 더 작은 크기로 글꼴을 계속 보여줍니다 (하단의 "상표 _ 발끝"). "xx-large"를 사용하면 페이지의 나머지 부분에있는 "small"글꼴만큼 큰 글꼴조차 만들지 않습니다. Android에서 Chrome 페이지를보고 있습니다.

또한이 시뮬레이터에서이 페이지를 볼 때 전체 페이지의 모든 글꼴이 너무 작아서 읽을 수 없습니다.

http://transmog.net/iphone-simulator/mobile-web-browser-emulator-for-iphone-5.php?u=http://inrix.com/traffic/Privacy

첫째, 왜 페이지의 하단에있는 상표의 글꼴 페이지 (안드로이드 크롬)의 나머지 부분에 글꼴에 비해 훨씬 작은 나타나고있다?

둘째, iPhone 시뮬레이터에서 글꼴이 너무 작게 나타나는 이유는 무엇입니까?

모든 글꼴을 모든 스마트 폰에서 읽기 쉬운 크기로 표시하려고합니다.

UPDATE :

내가 명시 적으로 글꼴 크기를 지정하면, 나도 같은 문제가 있습니다. 예를 들어 13px를 기본 글꼴로 지정하면 유사한 크기로 표시되도록 상표에 약 30px를 지정해야합니다.

"em"을 사용하면 같은 일이 발생합니다.

업데이트 : 난 그냥 기본에 그것을 테스트

은 (내가 생각하는) 내 삼성 갤럭시 S2하고 그것을 읽을 수있어 너무 너무 작아서 작은 글꼴을 보여줍니다에 브라우저. 그건 그렇고, 기본 Adroid 브라우저에서 더블 탭 수 있으며, 좋은 크기로 확장됩니다.

이를 시도하고 변화 할 것 같지 않았다 : 그 페이지의 소스를 살펴 했어

body { 
    -webkit-text-size-adjust: none; 
} 

Answer 1

을하고 난

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

볼 수 없었다

내 아이폰을 보았을 때 페이지 크기가 전혀 변하지 않았기 때문에 장치가 페이지의 크기를 해석하고있어 미디어 쿼리가 아무런 영향을 미치지 않는다고 제안했습니다.

뷰포트 메타 태그를 추가하면 찾고있는 미디어 쿼리와 글꼴 변경이 트리거됩니다.

info on the viewport tag

Answer 2

이 긴 샷을하지만, 그것은 당신에게 조금 도움이 될 수 있습니다.

iPhone4 (iOS 5.0.1)를 사용하여 http://inrix.com/traffic/Privacy을 열었습니다. 글꼴이 실제로 작습니다.

이 page의 @media을 살펴보십시오 (HTML5 Boilerplate's template도 볼 수 있습니다. 문제가있을 수도 있습니다). 폰트 크기 문제가 없으며 폰에서 크롬 (버전 26.0.1410.64 m), iOS 5.0.1 (9A405) 및 Android 2.3.6의 이전 링크을 테스트했습니다. . 어쩌면 당신은 @media에서 뭔가를 파낼 수 있습니다.

나는 Vector's answerYou should specify sizes when you want consistency과 더 이상 동의하지 않을 수 있습니다. 일관성을 유지하려면 이름을 피하십시오.

• How we learned to leave default font-size alone and embrace the em :

  마지막으로 여기에 더 정보에 대한 몇 가지 링크입니다.

• Responsive Design with CSS3 Media Queries.

마지막으로 당신이 다운로드하여 CSS에 font을 포함 할 수있는 다른 옵션으로 :

* { padding: 0; margin: 0; font-family: "LiberationMonoRegular", Verdana, Tahoma; } 

는 희망이 도움이 : 당신의 재설정에

다음

@font-face { 
    font-family: 'LiberationMonoRegular'; 
    src: url('fonts/LiberationMono-Regular-webfont.woff') format('woff'), 
     url('fonts/LiberationMono-Regular-webfont.ttf') format('truetype'); 
    font-weight: normal; 
    font-style: normal; } 

은 당신의 글꼴을 사용!

Answer 3

선 높이 설정은 어떻게됩니까?

글꼴 위치가 다른 여러 웹 브라우저를 통해 동일한 문제가 발생했습니다. height 및 line-height을 설정하여이 문제를 해결할 수 있습니다.