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.

This article shares the viewport attribute to solve the problem of the font being reset when switching from vertical screen to horizontal screen on the mobile terminal. When I first started working on it, I never tested the page on my mobile phone. As a result, after I wrote several pages, I found that the page was extremely small and almost invisible.

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

Viewport: There are two viewports in mobile browsers: visible viewport (device screen size) and browser viewport (webpage width).

Take the iPhone 4s as an example. Its screen is 320*480, but it can display content with a width of 980 pixels (the default for iPhone is 980), so when you put a webpage on the mobile side and display it, it is equivalent to Shrunk by 980/320. The purpose of doing this on mobile phones is to display more things, but the result is that the pages made on the PC are as small as ants on the mobile terminal!

The mobile version has a meta tag: viewport. You can use this tag to set the browser viewport width to be the same as the visible viewport width.

<meta name="viewport" content="width=device-width">

For some old mobile device browsers that do not support viewport (well, maybe, such as BlackBerry), you can use the following code

<meta name="HandheldFriendly" content="true">

But I think not many people use it now For this, usually just write the first line.

Speaking of viewport, he actually has some other attributes:

initial-scale: initial scaling ratio

maximum-scale: allows scaling Maximum scale

minimum-scale: The minimum scale allowed for scaling

user-scalable: Whether to allow manual scaling

What are these properties used for?

When the mobile device switches from portrait to landscape, the font will be reset and become very large. How to solve it?

You only need to set it like this

<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1, maximum-scale=1>

The default zoom ratio of the page is 1, and the allowed zoom is also 1-1, which is equivalent to disabling zoom. The browser will only define it according to the style. Font size rendering.

You may see this way of writing.

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" >

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

I found some more specific explanations elsewhere:

1) Does user-scalable=no guarantee that the page cannot be scaled? NO, some browsers don't like this. Another trick is minimum-scale=1.0, maximum-scale=1.0. Just set the maximum and minimum scaling ratio to 1.0.

2), initial-scale=1.0 Is the initial scaling controlled by user-scalable? Not necessarily. Some browsers will interpret user-scalable as manual scaling by the user. If user-scalable=no, initial-scale will not take effect.

3). The mobile page can be moved by touch, but if there is a need to prohibit this operation, the page width is equal to the screen width and the page fits the screen exactly to ensure that the page cannot be moved.

4). If the page is reduced to fit the screen width, a problem will arise. When the text box is activated (gets focus), the page will be enlarged to its original size.

Therefore, for the sake of safety, it is recommended to use the second way of writing.

Of course, the disadvantage of this is that users are prohibited from zooming. There is a compromise method in "Web Development Practice". If you are interested, you can take a look. I will not describe it here.

A little digression:

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

This attribute also prohibits font scaling. The advantage of this attribute is that the range can be customized and set according to project requirements.

It should be noted that the function of this attribute is to disable the text size adjustment function of the Webkit kernel browser rather than to control the page zoom. The minimum font limit of the Chinese version of Chrome browser is 12px.

However, due to the abuse of this attribute, desktop browsers no longer supported it a few years ago, so I have never actually used it. I only saw it in other materials.

【Related Recommendations】

1. Special Recommendation:"php Programmer Toolbox" V0.1 version Download

2. Example code about viewport compatibility issues

3. viewport special topic: 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 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.. For more information, please follow other related articles on the PHP Chinese website!