Mobile page adaptive cell phone screen width
1, using meta tags, is also a commonly used method. In theory, this label can be used to adapt to all sizes of screens, but the different interpretations and support of each device are incompatible with all browsers or systems.
first interprets the meaning of the label:
[code]
.lt; meta name=.quot; viewport.quot; content=.quot; width=device-width, initial-scale=1.0, minimum-scale=1.0, / > if you do not understand the use of this label first, it needs Baidu first. Next.
explanation: what is the width of the "width" in content, which I have read is not clear about this, and there are several options: the width of the virtual window, the width of the phone screen, the width of the page, and so on? This refers to the width of the virtual window. After understanding the width, to follow up the various scale, you should know who and who is the proportion, the width of the virtual window / page width, so there will be problems in Android equipment size difference is very large in the mainstream of the width of 3204807201080 and other sizes, and the above label can only support one size, of course some The browser will automatically scale it to the screen, but this is not a unified standard. The right thing to do is to dynamically generate the label with JS, and of course, you should get the screen size first.
for this tag still needs to be shared below:
1), user-scalable=no can guarantee that the page can not be scaled? NO, some browsers do not eat this set, another trick is minimum-scale=1.0, maximum-scale=1.0 maximum and minimum scaling ratio is set to 1. Is the initial scaling of
2 and initial-scale=1.0 controlled by user-scalable? Not necessarily, some browsers will interpret user-scalable as user manual scaling, and if user-scalable=no, initial-scale will not work.
3), the mobile page can touch the mobile, but if there is a need to prohibit the operation, the page width equals the screen width is the page just fit the screen to ensure that the page is not moving.
4), if the page is narrowed to adapt to the width of the screen, there will be a problem, when the text box is activated (get the focus), the page will be enlarged to the original size.
is a little experience of using viewport tag to share with you.