크기가 큰 글꼴을 표시하는 안드로이드 브라우저를 제외한 모든 브라우저에서 웹 페이지가 잘 작동합니다.

Question

모든 주요 브라우저에서 잘 작동하는 웹 페이지를 만들었습니다. 나는 모바일 브라우저에도이 웹 사이트를 테스트하고 채택했다. 안타깝게도 Android 브라우저에서 개발할 때 페이지를 테스트하지 않았고 문제에 대해 알지 못했습니다 (Android 4.2).

다음보기 포트는 iPhone 5 및 모바일 크롬과 같은 모바일 브라우저에서 잘 작동합니다.

<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimal-ui"> 

.. 나는 그것을 바꾸지 않을 것이다.

또한 모바일 장치에서 제대로 작동하는 일부 미디어 쿼리를 수행했습니다.

@media only screen and (min-width : 150px) and (max-width : 420px) 
@media only screen and (min-width : 150px) and (max-width : 980px) 

웹 페이지는 977px의 용기에 포장과 나는 둘 다 안드로이드 브라우저에서 훨씬 더 큰 표시 24 픽셀과 16px의 글꼴 (안드로이드 4.2)를 사용한다. 제안 사항이있는 사람은 누구나 글꼴 문제를 해결할 수 있습니까?

CSS 글꼴 크기 조정 및 텍스트 크기 조정을 시도했지만 모자 문제를 해결할 수 없어서 여러 가지 브라우저에서 출력이 달라집니다.

Answer 1

잠못드는 밤이 지나고 나는 일하는 해결책을 찾았습니다.

"body"섹션이 끝나기 전에 Javascript/JQuery 스크립트를 삽입하여 Android 탐색기의 글꼴 크기를 기본 탐색 모음에 맞게 줄였습니다.

첫 번째 if 문을 사용하면 픽셀 변경이 chrome android 브라우저에도 나타나지 않으므로 중첩 if 문은 Android 브라우저를 타겟팅합니다.

<script> 

    if(!(navigator.userAgent.toLowerCase().indexOf('chrome') > -1)) { 
     if (navigator.userAgent.toLowerCase().indexOf('android') > -1) { 
       $('#mainnav nav ul li a').css('font-size','18px'); 
     } 

    } 

</script> 

이 스크립트는 모두를 테스트하지 않았으므로 다른 Android 브라우저에도 최적화되어있을 수 있습니다.

Answer 2

밀도 문제와 비슷합니다. 뷰포트 태그에 target-densitydpi을 추가하십시오. 이 기능은 GB 기기에서 사용되지만 더 큰 기기에서는 사용되지 않음을 기억하십시오. 자세한 내용은 http://www.petelepage.com/blog/2013/02/viewport-target-densitydpi-support-is-being-deprecated/을 확인하십시오.