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

Example code about viewport compatibility issues

May 17, 2017 pm 01:20 PM

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!

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

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

SVM examples in Python SVM examples in Python Jun 11, 2023 pm 08:42 PM

Support Vector Machine (SVM) in Python is a powerful supervised learning algorithm that can be used to solve classification and regression problems. SVM performs well when dealing with high-dimensional data and non-linear problems, and is widely used in data mining, image classification, text classification, bioinformatics and other fields. In this article, we will introduce an example of using SVM for classification in Python. We will use the SVM model from the scikit-learn library

Compatibility issues between PHP8.0 and Laravel Compatibility issues between PHP8.0 and Laravel May 14, 2023 am 08:45 AM

Recently, PHP8.0 was officially released. As a Laravel developer, you may be thinking about upgrading your project to the latest version of PHP to gain more features and performance improvements, but before that, you need to know PHP8 .0 and Laravel compatibility issues in order to better avoid and solve these problems. First, let's take a look at what changes PHP8.0 has brought. The biggest change in PHP8.0 is its introduction of JIT (Just-In-Time) compiler

VUE3 Getting Started Example: Making a Simple Video Player VUE3 Getting Started Example: Making a Simple Video Player Jun 15, 2023 pm 09:42 PM

As the new generation of front-end frameworks continues to emerge, VUE3 is loved as a fast, flexible, and easy-to-use front-end framework. Next, let's learn the basics of VUE3 and make a simple video player. 1. Install VUE3 First, we need to install VUE3 locally. Open the command line tool and execute the following command: npminstallvue@next Then, create a new HTML file and introduce VUE3: &lt;!doctypehtml&gt;

CSS Viewport: How to use vh, vw, vmin, and vmax units for responsive design CSS Viewport: How to use vh, vw, vmin, and vmax units for responsive design Sep 13, 2023 pm 12:15 PM

CSSViewport: How to use vh, vw, vmin and vmax units to implement responsive design, specific code examples required In modern responsive web design, we usually want web pages to adapt to different screen sizes and devices to provide a good user experience. The CSSViewport unit (viewport unit) is one of the important tools to help us achieve this goal. In this article, we’ll cover how to use vh, vw, vmin, and vmax units to achieve responsive design.

Learn best practice examples of pointer conversion in Golang Learn best practice examples of pointer conversion in Golang Feb 24, 2024 pm 03:51 PM

Golang is a powerful and efficient programming language that can be used to develop various applications and services. In Golang, pointers are a very important concept, which can help us operate data more flexibly and efficiently. Pointer conversion refers to the process of pointer operations between different types. This article will use specific examples to learn the best practices of pointer conversion in Golang. 1. Basic concepts In Golang, each variable has an address, and the address is the location of the variable in memory.

PHP simple web crawler development example PHP simple web crawler development example Jun 13, 2023 pm 06:54 PM

With the rapid development of the Internet, data has become one of the most important resources in today's information age. As a technology that automatically obtains and processes network data, web crawlers are attracting more and more attention and application. This article will introduce how to use PHP to develop a simple web crawler and realize the function of automatically obtaining network data. 1. Overview of Web Crawler Web crawler is a technology that automatically obtains and processes network resources. Its main working process is to simulate browser behavior, automatically access specified URL addresses and extract all information.

Reasons why win10 installation failed Reasons why win10 installation failed Feb 19, 2024 pm 11:02 PM

Reasons for Win10 installation failure With the rapid development of technology, operating systems are constantly being updated and iterated. Microsoft's Windows system has always been loved by the majority of users. However, some users may encounter installation failures when using the Windows 10 operating system. So what are the reasons for these installation failures? 1. Hardware compatibility issues If your computer hardware configuration is older or is not compatible with the minimum hardware requirements of the Windows 10 operating system, then there is a high possibility that the installation process will

VAE algorithm example in Python VAE algorithm example in Python Jun 11, 2023 pm 07:58 PM

VAE is a generative model, its full name is VariationalAutoencoder, which is translated into Chinese as variational autoencoder. It is an unsupervised learning algorithm that can be used to generate new data, such as images, audio, text, etc. Compared with ordinary autoencoders, VAEs are more flexible and powerful and can generate more complex and realistic data. Python is one of the most widely used programming languages ​​and one of the main tools for deep learning. In Python, there are many excellent machine learning and deep

See all articles