Mobile page viewport settings, the problem of horizontal screen character weight placement

At the beginning of the time because there has been no test on the mobile page, resulting in later written a number of pages after the test found that the page is particularly small, almost invisible.

The reason is that each mobile device is its own default viewport width .

Viewport: There are two viewports in the mobile browser: the visible viewport (device screen size) and the browser viewport (Web page width).

For iphone4s, its screen is 320*480, but it can display 980 pixel width (iphone default is 980), so you put the page on the mobile side of the display is equivalent to a reduction of 980/320. The purpose of the mobile phone is to show more things, but the result is a PC-ready page to the mobile side as small as ants!

The mobile side has a META tag: viewport, you can use this tag to set the browser viewport width and visible viewport width.

<name= "Viewport"  content= "Width=device-width">

For some old mobile browsers that don't support viewport (well, maybe, for example, BlackBerry), you can use the following code

<name= "handheldfriendly"  content= "true">

But I think it is not a lot of people to use this, generally write the first line on the line.

Speaking of viewport, he actually has some other attributes:

Initial-scale: Initial zoom ratio

Maximum-scale: Maximum scale allowed for scaling

Minimum-scale: Minimum scale allowed for scaling

User-scalable: Whether manual scaling is allowed

What is the use of these attributes?

Mobile device when the vertical screen switch to the screen when the font will be reset, will become very large, how to solve it?

Only need to set this

<name= "Viewport"  content= "Width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1>

This sets the default zoom percentage of the page to 1, allowing scaling to be 1-1, which is equivalent to banning scaling, and the browser will only render according to the font size defined by the style.

You may see this in this notation.

<name= "Viewport"  content= "Width=device-width, Initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no ">

But in fact, when you use user-scalable=no this attribute minimum-scale=1,maximum-scale=1 has been ignored, because you have banned scaling.

Some more specific statements have been found elsewhere:

1), User-scalable=no must be able to ensure that the page can not be scaled? No, some browsers do not eat this set, there is a trick is minimum-scale=1.0, maximum-scale=1.0 maximum and minimum zoom ratio are set to 1.0.

2), initial-scale=1.0 the initial scaling ratio is controlled by user-scalable? Not necessarily, some browsers will understand user-scalable as user manual scaling, if User-scalable=no,initial-scale will not take effect.

3), mobile phone page can touch mobile, but if you need to prohibit this operation, that is, the page width is equal to the screen width is the page just fit the screen to ensure that the page can not move.

4), if the page is reduced to fit the screen width, there will be a problem, when the text box is activated (get focus), the page will be enlarged to the original size.

so for the sake of insurance, the second way of writing is recommended.

Of course, the disadvantage of this is to prohibit users to zoom, in the "Web development Combat" there is a compromise approach, interested can go to see, here is not in the narrative.

A little off-topic:

There is a property in CSS3:-webkit-text-size-adjust.

This property is also forbidden font scaling, the advantage of this property is that you can customize the scope, can be set according to project requirements.

It is important to note that the function of this property is to disable the text resizing function of the WebKit kernel browser instead of the page zoom control. The minimum limit for Chinese Chrome browser fonts is 12px.

However, due to the abuse of this attribute, the desktop browser has not been supported a few years ago, so I have not really used it, are found in other materials.

Above, if there is any mistake, please correct me.

Mobile page viewport settings, the problem of horizontal screen character weight placement