Home > Web Front-end > HTML Tutorial > Example code about viewport compatibility issues

Example code about viewport compatibility issues

零下一度
Release: 2017-05-17 13:20:18
Original
1789 people have browsed it

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" />
Copy after login

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);
Copy after login

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!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template