Home > Article > Web Front-end > H5 mobile page zoom

H5 mobile page zoom

php中世界最好的语言Original: 2018-03-27 13:59:523736browse

This time I will bring you H5 mobile page scaling. What are the precautions for H5 mobile page scaling? Here is a practical case, let’s take a look.

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

<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: Indicates that 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: Indicates the minimum scaling ratio allowed

maximum: Indicates the maximum scaling ratio allowed

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

Instance problem situation ：

## Phenomenon:

When the user clicks 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<head

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

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

H5 mobile page zoom

Related articles