Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "how to solve the width:100% adaptation problem of mobile browsers and pc browsers". The editor shows you the operation process through actual cases, and the operation method is simple, fast and practical. I hope this article "how to solve the width:100% adaptation problem of mobile browsers and pc browsers" can help you solve the problem.

Tips: debug iPad or iPhone can start debug mode in the settings, and debug online after the developer mode is enabled like the Safari browser in Mac. The function is powerful. Recently, when I was working on a page, I found that the background was not fully displayed in the Safari browser of iPad. After locating the div, I found that the width of the specified css was 100%. After searching for Baidu, I found that the width of viewport in safari is 980px by default. If the initial viewport width is not specified in advance, it will be processed according to 980px by default. You can initialize the viewport width by default or set the min-width in the css, but the easiest way is to initialize the viewport in the head tag.

See the following code for details:

Assuming that the width of the page is 960px or 1080px, you can add this value to width and set initial-scale to an appropriate multiple value.

For example, if the width of a page is 1080px, it is set to be friendly regardless of whether the horizontal or vertical screen is switched before and after loading.

But for example, the head part is set to width:100%, and the maximum width in the middle of the page is acquiesced: 1200px, the length of the head is not the same as that of the middle. This problem is caused by the discrepancy between the tacit pixels of the pc and the phone. Should it be settled?

By adding the above sentence to the web page, the width of the web page can automatically adapt to the width of the mobile phone screen:

Line 1:

Width=device-width: indicates that the width is the width of the rig screen

Initial-scale=1.0: represents the initial scale

Minimum-scale=0.5: represents the smallest scale

Maximum-scale=2.0: represents the maximum scale

User-scalable=yes: indicates whether the user can adjust the zoom ratio

Line 2:

Set the full screen of the iphone page.

Line 3:

The cancellation number is recognized as the phone number.

If you want to open a web page and automatically display it in the original scale, and users are not allowed to modify it, it is:

After this appearance is written, the width of some pictures such as header banners can be set to, and all the pages will look full screen on the equipment. Change the device-width in width=device-width to the pixel value you set in the middle, such as my setting to 1200px, and the problem will be solved.

This is the end of the content on "how to solve the width:100% adaptation problem of mobile browsers and pc browsers". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.