반응 형 디자인 - 안드로이드 스케일링이 아닙니다.

Question

제가 작업하고있는 반응 형 디자인은 또 다른 문제점을 나타냅니다. 간단하게하기 위해 화면 크기 또는 장치 크기가 750px 미만인 경우 몸체를 480px로 낮추도록 설정했습니다. 그런 다음 이상적인 장치의 화면은 너비에 맞게 조정해야합니다.

오늘 이미 도움을 얻은 후에 뷰포트 메타를 추가 했으므로 이제는 CSS가 내 iPhone과 Android뿐만 아니라 최소화 된 데스크톱 브라우저에도 응답합니다.

iPhone이 멋지다. 너비가 확대되므로 웹 페이지가 약 480px이지만 320px iPhone 화면에 완벽하게 맞습니다.

그러나 Android에서는 너무 멀리 확대되었습니다. 오른쪽면의 약 25 % ~ 30 %가 화면을 벗어나서 화면을 스크롤해야합니다. 핀치 - 줌 - 아웃을 조금만하면 화면이 화면 너비에 맞게 잘 보이게됩니다. 왜 내가 수동으로 축소해야하는지 모르겠다.

• 왜 안드로이드는 페이지가로드 될 때 페이지의 너비로 축소되지 않습니까?

내 메타 태그는 다음과 같습니다

내 CSS는 다음과 같습니다

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

:

@media all and (max-device-width: 750px), all and (max-width: 750px) { 
    body {max-width:480px;} 
    #container { 
    width: 90%; 
    margin: 0px auto; 
    padding: 0px; 
    min-width:480px; 
    } 
    #rightnav {display:none;} 
} 

Answer 1

당신은 분명히 가지고 320 ~ 화면에서 480 픽셀 레이아웃을 표시 할 계획이라면 확대/축소하려면 지정된대로 정확하게 작동하지만 아이폰은 일부 규칙을 무시하고 전체 화면으로 표시합니다. initial-scale 값을 0.75로 설정하면 모든 장치가 처음에 해당 확대/축소 수준을 유지하도록 할 수 있습니다. 물론 더 나은 솔루션은 320px 장치에서 화면 내용을 더욱 축소 할 수있는 또 다른 미디어 쿼리를 갖는 것입니다.