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

黄舟
黄舟Original
2017-10-30 10:07:082567browse

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">

or

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

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

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
in the header 48258c58584571668c20db9ad20c4595 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!

Statement:
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