뷰포트 설정이 모바일 문제가 있습니다.

Question

모바일 사이트를 처음 개발 중이며 반응이 빠른 디자인을 만들려고합니다.

지금까지 viewstate 설정에 많은 문제가 있습니다. 주로 안드로이드 에서뿐만 아니라 일부는 아이폰에서. (단지 확인하기 위해)

그리고 나는 또한 내 CSS이 사용하고 있습니다 :

나는 이러한 설정을 사용하고 @ -ms-뷰포트 {폭 : 장치 폭; } @ -o-viewport {width : device-width; } @viewport {width : device-width; }

내 iPhone에서 대부분 완벽하게 작동합니다. 그러나 때로는 가로로 변경 한 다음 보통으로 돌아 가면 페이지의 해상도가 더 작아집니다. 때로는 동일하게 유지됩니다.

Android 휴대 전화에서는 가로 모드와 일반 모드에서 완벽하게 작동합니다. 여기 내 문제는, 때로는 내가 페이지를 새로 고침, 모바일 보이는 포트 설정을 전혀 읽지 않는 것 같습니다. 모바일 용으로 최적화되지 않은 일반 웹 페이지처럼 보입니다.

누구나 내가 여기서 잘못하고있는 것에 대한 아이디어가 있습니까?

편집 나는 또한 메타 뷰포트 태그 (내 코드는이 게시물에 표시되지 않는 이유는 모르겠지만, 그 중 하나가 작동하지 않습니다) 추가하려고

.

Answer 1

코드를 단순화하고 다시 검사하는 것으로 시작할 수 있습니다. 페이지의 선두에

은 추가 뷰포트 태그가있는 경우,

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

이 지금 제거해야합니다.

당신의 CSS를 사용

@media (max-width: 767px){  /* adjust viewport width as req'd */ 

.selector{ ... } 

} 

의 미디어 쿼리에 대한

당신이 사용했던 다른 @ 태그 (예 : @ -ms-뷰포트)

행운을 제거!