> 웹 프론트엔드 > HTML 튜토리얼 > 뷰포트 호환성 문제에 대한 예제 코드

뷰포트 호환성 문제에 대한 예제 코드

零下一度
풀어 주다: 2017-05-17 13:20:18
원래의
1786명이 탐색했습니다.

최근 모바일 웹사이트를 개발했는데 viewport 사용 시 몇 가지 문제가 발생했습니다.

많은 시도 끝에 UC, Chrome, Android, Safari가 기본으로 제공되는 브라우저가 현재 상황입니다. 예상대로 줌 비율을 표시할 수 있습니다.

그런데 사용자가 엄청나게 많은 QQ 브라우저에서는 뷰포트를 인식할 수 없는(또는 사용할 수 없는) 것 같습니다.

코드는 다음과 같습니다.

HTML

<meta id="viewport" content="
    target-densitydpi=device-dpi, 
    user-scalable=no, 
    width=device-width, 
    initial-scale=0.5" name="viewport" />
로그인 후 복사

JavaScript

var viewPortScale;
var dpr = window.devicePixelRatio;
if(dpr <= 2) {
    viewPortScale = 1 / window.devicePixelRatio;
} else {
    viewPortScale = 0.5
}

document.getElementById(&#39;viewport&#39;).setAttribute(
        &#39;content&#39;, 
        &#39;user-scalable=no, 
         width=device-width, 
        initial-scale=&#39; + viewPortScale);

// alert(viewPortScale);
로그인 후 복사

경고 설명을 삭제하면 QQ 브라우저가 팝업되어 필수 내용을 표시합니다. 확대/축소 비율이 있지만 여전히 필요에 따라 크기가 조정되지 않습니다.

【관련 추천】

1. 특별 추천: "php 프로그래머 툴박스" V0 .1 버전 다운로드

2.모바일 단말기에서 세로 화면에서 가로 화면으로 전환 시 글꼴이 재설정되는 문제 해결을 위해 뷰포트 속성 공유

3. 뷰포트 주제: CSS의 반응형 웹 디자인 심층 이해 - 뷰포트

4. HTML5의 뷰포트 매개변수 소개 및 사용 방법

위 내용은 뷰포트 호환성 문제에 대한 예제 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿