Android 기기의 브라우저 용 메타 뷰포트 태그 사용

Question

모바일 웹 사이트를 개발 중이며 모바일 Safari에서 잘 작동합니다. 그러나 Android 기기에서는 웹 사이트가 너무 많이 확대되지만 일부 기기에서만 확대됩니다. 내 친구의 전화로 시도하고 HTC 매직 안드로이드 2.1을 실행하고 괜찮아 보여,하지만 안드로이드 1.5를 실행하는 모토로라 Backflip입니다 2.1과 내 전화를 사용하여 에뮬레이터에 너무 많이 확대 보여줍니다. 불일치가있는 이유는 무엇입니까?

링크는 다음과 같습니다

<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width" /> 

나는 그것이 장치 사이의 해상도와 화면 크기 차이해야 할 것 같아요 : http://itphosting1.com/dtang/jarritos/이

이 내가 사용하고있는 메타 뷰포트 태그입니다. 해결하는 방법을 정말 확실하지 ...하지만 그

Answer 1

<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width" /> 

Answer 2

처럼 뭔가로 변경에 대해 나는 비슷한 문제가 있었지만 솔루션은 내가 일하고 사이트의 설정에 매우 의존하는 방법 에. Android 2.2 이하 버전에서는 사이트가 기기로 올바르게 확장되지 않으며 미디어 쿼리가 내 확대/축소, 더 넓은 너비의 미디어 쿼리 실행, 확대/축소 및 더 작은 너비의 미디어 쿼리에 적용됩니다.

해결 방법으로는 <meta name="viewport" content="width=device-width, initial-scale=1">을 사용하는 것이 뷰포트 메타 태그와 관련이 있습니다. 그렇다면 내가 고려해야 만했던 것은 페이지의 주 컨테이너가 CSS에 명시적인 너비 세트를 가지고 있다는 점이었습니다. 이 너비는 다른 브라우저에서 뷰포트 너비에 반응하지만이 경우에는 그렇지 않습니다. 첫 번째 미디어 쿼리가 실행될 때 주 컨테이너가 100 % 너비로 설정된다는 것을 확신한다면 CSS에서 명시 적으로 선언 된 너비를 남겨 둘 수 있습니다. 기본적으로 LESS syntax을 사용하는 경우 :

@containerWidth: 1080px; 

#page { 
    width: @containerWidth; 
} 

@media screen and (max-width: @containerWidth) { 
    #page { 
     width: 100%; 
    } 
}