Pain points in front-end web design: the adaptive problem of width: 100% in Mobile browsers and pc browsers, and the adaptive problem of width

Pain points in front-end web design: the adaptive problem of width: 100% in Mobile browsers and pc browsers, and the adaptive problem of width

Tips: When debugging an iPad or iPhone, you can enable the debugging mode in settings. When the developer mode is also enabled in Safari in Mac, you can perform online debugging. Powerful. Recently, when I made a page, I found that the background is not fully displayed in the Safari browser of the iPad. After locating the div, I found that the width of the specified css is 100%. After searching for Baidu, I found that, in safari, the default viewport width is 980px. If the initial viewport width is not specified, the default value is 980px. The viewport width can be initialized by default or min-width can be set in css, but the simplest method is to initialize the viewport in the head label. For details, see the code below: <metaname = "viewport" content = "width = actual webpage width, initial-scale = times"/> assume that the webpage width is 960px or 1080px, you can add this value to width and set initial-scale to a proper value. For example, if the width of a page is 1080 PX, it is set to <metaname = "viewport" content = "width =, initial-scale = 0.9 "/> in this way, both the landscape screen and the portrait screen can be displayed in a friendly way. [Refer to: browsing and comparison between stock fund-filling mobile phone end and pc end]

For example, if the header is set to width: 100%, and the maximum width in the middle of the page is pixel by default, the header length is different from that in the middle. This problem is caused by inconsistent default pixels between the pc end and the mobile phone end. Such as and solution?

After finding a lot of information, I finally found out:

By adding the above sentence to the 
[Html]View plaincopy
 
 

  
  
<Meta name = "viewport" content = "width = device-width, initial-scale = 1.0, minimum-scale = 0.5, maximum-scale = 2.0, user-scalable = yes "/>
  
  
<Meta name = "apple-mobile-web-app-capable" content = "yes"/>
  
  
<Meta name = "format-detection" content = "telephone = no"/>
 
 

The first line:
Width = device-width: indicates that the width is the width of the device screen.
Initial-scale = 1.0: indicates the initial scaling ratio.
Minimum-scale = 0.5: indicates the smallest scaling ratio.
Maximum-scale = 2.0: indicates the maximum scaling ratio.
User-scalable = yes: indicates whether the user can adjust the scaling ratio.
Row 2:
Set the full screen of the iphone page.
Row 3:
The canceled number is recognized as a telephone number.

If you want to open a webpage, it is automatically displayed in the original proportion and cannot be modified by the user, it is:
[Html]View plaincopy
 
 

  
  
<Meta name = "viewport" content = "width = device-width (this can be changed, set based on the width of other div), initial-scale = 1.0, minimum-scale = 1.0, maximum-scale = 1.0, user-scalable = no "/>
 
 

In this way, you can set the width of some images such as the page header banners to style = "width: 100%", and the entire page looks full screen on the device. [Replace device-width in width = device-width with the pixel value you set in the middle, for example, set it to pixel PX.] This solves the problem.