Home > Web Front-end > H5 Tutorial > Detailed explanation of the solution to the scaling problem of HTML5 mobile page

Detailed explanation of the solution to the scaling problem of HTML5 mobile page

黄舟
Release: 2017-10-30 10:07:08
Original
2535 people have browsed it

Usually when writing HTML5 mobile page, we will find that the proportion of elements displayed on the page is incorrect, then what we need to add at this time is:

<meta name="viewport" content="width=device-width,initial-scale=1">
Copy after login

or

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
Copy after login

Then let’s explain this sentence:

viewport: represents the display window;

width=device-width,initial-scale=1.0: represents The width of the display window is equal to the screen width of the device, initial-scale=1.0, that is, the initial scaling ratio is 1.0;

minimum-scale: represents the minimum ratio allowed for scaling

maximum: Indicates the maximum zoom ratio allowed

user-scalable: Indicates whether the user is allowed to zoom the page, the value can be yes or no

Example problem situation:

Phenomenon:

When the user clicks on the input box to edit text on the mobile page, the page will automatically be enlarged

Solution:

Insert

in the header <

head

> tag of the page or do not allow users to zoom the page user-scalable =no

Summary

The above is the detailed content of Detailed explanation of the solution to the scaling problem of HTML5 mobile page. 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