3
브라우저가 메타 뷰포트 요소를 기반으로 웹 사이트의 크기를 조정하는지 여부를 감지 할 수 있습니까?메타 뷰포트 확장 지원 검색
A
답변
0
아니요, 메타 뷰포트 요소는 모바일 브라우저가 현재 페이지를 처리하는 방법을 알려줍니다. 그래서, 그것은 당신이 무엇을 할 것인가에 달려 있습니다.
당신이 다음 크기 조절 이벤트를 잡을 경우 일부 자바 스크립트로 작업을 수행 할 수 있습니다
$(window).resize(function() {
//resize just happened, pixels changed
});
또는 당신은 단지 다음과 같은 CSS 파일에서 미디어 쿼리를 사용하여 다른 화면 크기에 다른 스타일을 추가하려면 :
@media only screen and (min-width : 30em) {
body{font-size: 125%;}
}
@media only screen and (min-width: 37.5em) {
body{font-size: 163%;}
}
1
메타 뷰포트가 적용될지 여부를 감지하는 자바 스크립트 방법이 없습니다. 이 접근 방식 등으로 머리에 인라인 JS 두 단계 과정을 통해 적용된 경우, 당신은 확인할 수 있습니다
<head>
<script>
var clientWidth = document.documentElement.clientWidth;
</script>
<meta name="viewport" content="width=device-width,initial-scale=1">
<script>
if (clientWidth !== document.documentElement.clientWidth){
//device or browser support the meta-viewport which just changed the width
}
</script>
</head>
이 초기 때문에 모바일에서 대부분의 일반적인 경우에 반응 디자인와 작동/모바일 장치의 기본 뷰포트는 일반적인 데스크톱 화면이 아닌 980 픽셀 (http://www.quirksmode.org/mobile/metaviewport/)입니다. 현재의 데스크톱 브라우저는 메타 뷰포트를 지원하지 않습니다.
나는이 점에서 모바일 장치를 감지하는 요인으로이 방법을 사용할 것입니다. 그러나 예외가 있다는 사실에 주목할 필요가 있습니다. 따라서 모든 기기에서 위의 방법 만 사용할 수는 없습니다.
블랙 베리 플레이 북에서는 기본 뷰포트 크기가 600x1024 픽셀 크기 인 device-width, initial-scale=1과 이미 일치하므로 메타 뷰포트 재배치에도 불구하고 clientWidth는 변경되지 않습니다.