휴대 전화 전용 뷰포트

Question

휴대 전화보기 및 일반보기 만있는 반응 형 레이아웃을 만들려고합니다 (예 : 정제는 정상적으로 페이지를로드해야 함).

CSS가 작동하는 한 모든 것이 올바르게 작동하지만 세로 모드에서는 뷰포트가 줌을 망치고 있습니다. (픽셀 너비가 확대됩니다.)

휴대 전화가 크기에 맞게 크기가 조정되는 동안 태블릿을 전체 페이지로 축소 할 수있는 방법이 있습니까?

다음은 내가 가지고있는 것입니다 ... 처음 배율을 .75로 변경하면 거의 작동하지만 아이폰은 풍경에있을 때 정상적인 사이트를로드합니다. 원하지 않습니다.

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

<link rel="stylesheet" type="text/css" media="only screen and (max-width: 568px)" href="css/mobile-styles.css" /> 

Answer 1

뷰포트를 엉망으로 만들면 두통과 접근성 문제가 발생할 수 있습니다. 대신 전화기 (작은 화면)에 사용할 CSS를 만든 다음 min-width:500px (또는 다른 중단 점) 미디어 쿼리에 "전체"사이트 (큰 화면)의 스타일을 포함 시키십시오.

예 CSS :

/*this will fire for any size screen*/ 
nav{ 
    width:100%; 
} 

/*this changes the above styles for any screen over 500px*/ 
@media (min-width:500px){ 
    nav{ 
    width:50%; 
    float:left; 
    } 
}