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

최근 모바일 웹사이트를 개발했는데 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!