How to debug CSS compatibility issues in iPhone Safari browser

If our computer browser has CSS compatibility issues, it is now easy to solve. Chrome browser comes with a check tool, Firefox's FireBug is also very useful, Safari, 360, IE, EDGE all have their own debugging tools. They can check how HTML+JS+CSS is interpreted, and if it is interpreted incorrectly, you can see where the cause is.

But the above are all about computers. If the website has compatibility issues on iPhone, how to solve it? Here is a method to teach you, which requires a Mac computer and iPhone.

Taking this website as an example, the phenomenon is as follows:

The website works fine on PC, Mac, and Android phones. However, a black background appears on iPhone Safari, and the page can only be tiled 30%. Some banners are also only 30% wide. (iPhone6, iPhone6 ​​plus, iPhone5S, and iPhone5 all have problems, but iPhone3GS and iPad mini2 have no problems.)

Analysis method: Use Mac Safari browser, "Develop" in the menu, connect iPhone with data cable, and use methods like "Inspect" or firebug, so that the code style appears in Mac Safari and the selected block appears in iPhone Safari. This makes it easy to identify which block has a problem, reveal what kind of code, and find the cause of the problem.

Note: The same HTML+CSS will be interpreted differently on different devices and browsers, and the display effects will also be different.

It is found that the DIV displays 30% of the page width, but the child DIV content is 100%. Obviously, the child does not expand the parent DIV, and clear both is invalid.

Considering the width issue, I searched online for the reason and found out that the default width of iPhone's Safari is 980px. You need to specify the html viewport width, otherwise it will be processed according to the default 980px.

Solution: The easiest way is to initialize the viewport in the head tag, as shown in the code below:

 < metaname metaname = "viewport" content = " width = actual width of the web page, initial-scale = multiple value" />  

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

For example, if the width of a page is 1080px, then set it to: < metaname metaname = "viewport" content = " width = 1080 , initial-scale = 0.9 " />  

In this way, no matter you switch between horizontal and vertical screens before and after loading, it can be displayed in a friendly manner.

We use: < meta   name =”viewport” content =” width = 1100 ″ />  

The above is just one case, but this method is still very important. I hope it can help my friends.