Pain in the design of the Web front: An adaptive problem for mobile browsers and PC browsers width:100%

Tips: Debugging an IPad or IPhone starts debug mode in Settings, and online debugging is done on your Mac with the same developer mode as the Safari browser. The function is very sturdy. Recently, when making a page, found in the IPad's Safari browser background is not complete, after positioning to the div found that the width of the specified CSS is 100%; Baidu search found that safari in the default width of viewport 980px, if not previously specified its initial vie Wport width, it will be processed by default in 980px. You can initialize the viewport width by default or set the Min-width in CSS, but the simplest way is to initialize the viewport in the head tag. See code below: <metaname= "viewport" content= "width= Web page true width, initial-scale= times value"/> Assuming that the page width is 960px or 1080px, you can add the value in width and Initial-scale set a suitable multiplier value. For example, a page with a width of 1080px is set to: <metaname= "viewport" content= "width=1080, initial-scale=0.9"/> so that regardless of the load before and after the switch horizontal screen or vertical screen, are friendly to display. "can refer to: The stock of the mobile phone side and the PC side of the browser comparison "

However, for example, the head part is set to width:100%, and the maximum width of the middle page is default: 1200px, the head and middle length are inconsistent. This problem is caused by default pixel inconsistencies on the PC side and the phone. What should be like and resolved?

Find a lot of information, finally found out:

Add these words 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" />    
  
 

First line:
width=device-width: Indicates width is the width of the device screen
initial-scale=1.0: Indicates the initial zoom ratio
minimum-scale=0.5: Represents the minimum zoom ratio
maximum-scale=2.0: Represents the maximum zoom ratio
User-scalable=yes: Indicates whether the user can adjust the zoom ratio
Second line:
Set the iphone page full screen. 
Third line:
canceling a number is recognized as a phone number. 

If you want to open a webpage, it is automatically displayed at the original scale, and the user is not allowed to modify it:
[HTML]View Plaincopy
  
 

   
  
<Meta name="Viewport" content="Width=device-width (here is changeable, set according to the width of your 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 of the image of the page head banner to style= "width:100%", the entire page appears to be full screen on the device. "To change the device-width in width=device-width to the pixel value you set in the middle, such as my setting to 1200px," the problem is solved. 

Pain in the design of the Web front: An adaptive problem for mobile browsers and PC browsers width:100%