Example code about viewport compatibility issues

I recently developed a mobile website and encountered some problems when using viewport.

After many attempts, the current situation is that UC, Chrome, and Android automatically With the browser and safari, the viewport can be displayed according to the zoom ratio as expected.

However, in the QQ browser, which has a huge number of users, it seems that the viewport cannot be recognized (or cannot be used).

The code is as follows:

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);

If you remove the alert comment, the QQ browser will pop up to display the required zoom ratio, but there is still no Scale as needed.

【Related Recommendations】

1.

Special Recommendation:"php Programmer Toolbox" V0 .1 version download

2.

Share the viewport attribute to solve the problem of the font being reset when switching from vertical screen to horizontal screen on the mobile terminal

3.

Special topic on viewport: In-depth understanding of responsive web design in css - viewport

4.

Introduction to the parameters of Viewport in HTML5 and how to use it

The above is the detailed content of Example code about viewport compatibility issues. For more information, please follow other related articles on the PHP Chinese website!