Meizu mobile browser compatibility tuning best practices, compatibility tuning Best Practices

Meizu mobile browser compatibility tuning best practices, compatibility tuning Best Practices
Problem 1: Non-position: absolute container height: 100% does not take effect, leading to bottom location dislocation

1: The actual height of the container is rendered as 0.

 

2:

 

Node 1 style contains position: relative; height: 100%; but the height in meizu mobile browser is rendered as 0
Node 2 defines bottom:-140px; Locating Error

Solution:

1. Node 1 uses position: absolute
2. Or the height is written to the parent container height.
3. Use top positioning for node 2. It is also a best practice to use top instead of bottom for Internet Explorer compatibility.

 

Question 2: The text font size of some paragraphs in meizu mobile browser will be automatically enlarged

This is the feature of meizu mobile browser (optimized reading experience). When the page's contentWidth is greater than 800px, it will be regarded as a PC page by the browser, triggering this logic.
The method to disable this feature is to add class = "copyr" to the div node on the outermost layer, and all the child nodes in the node will disable the auto-zoom in font size feature. Note that the adding body node is invalid.

The following figure shows the effect after the feature is disabled:

 

Only the above two items are found for the time being. If you have other questions, we will continue to add them. Please follow the feedback below :)