How to implement mobile web page size adaptation

I finally finished the project at hand, and the missing people are back! In the process of doing the project, I encountered many points worth thinking about, which I will talk about quickly. The first problem encountered is the problem of web page size adaptation.

The more commonly used methods are:

• First, the page size should fill the screen without overflowing. Just add viewport in the html <head> tag (as shown below). The parameters represent: page width = screen width, the maximum and minimum scaling ratios are both 1, and users are not allowed to zoom in or out.

XML/HTML CodeCopy content to clipboard

< meta name = "viewport" content = "width=device-width,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" >

• Percentage adaptation: Convert the length unit into a percentage so that the length and width of the element will change at different widths.

Advantages: Seamless connection between widths, and relatively convenient operation.

Disadvantages: The font size requires another set of adaptive methods to adjust; when the screen width is greater than 700px, the elements will be too large if they continue to be based on percentages, which makes adjustment more difficult.

•Rem and em adaptive: Use media query method to determine the fontsize of <html> or <body> under different screen widths. Then use rem and em instead of px as units to achieve adaptivity.

Advantages: It can be set according to different screen widths, which can perfectly solve the proportion problem mentioned above when the screen is too large. The font size is not a problem either.

Disadvantages: It is set according to the width range and cannot achieve seamless transformation.

--------------------------------------------------------------------------------

These compatibility methods each have their own advantages and disadvantages, and none of them is perfect. How can we combine the advantages while avoiding the disadvantages?

When referring to Taobao's adaptive method, I accidentally discovered that the fontsize of the page <html> will be automatically adjusted according to the width of the screen, and the quotient of the screen width and the set font size is certain.

So I guess it uses JS to get the screen width, shrinks it according to a fixed ratio, and uses it as the unit length of rem to achieve adaptation.

Isn’t this a solution with all the advantages? ? Please allow me to get excited for a moment (☆_☆)

--------------------------------------------------------------------------------

The JS code is very simple to write, and it perfectly solves the problem of not being able to achieve seamless connection using rem settings.

But problems arose after testing on the mobile side. Safari on the mobile side executed the JS at lightning speed before the HTML was loaded. Before the page had set the width according to the viewport, JS read the wrong width, causing the element to become twice as large as before 0^0. setTimeout() was needed to solve the problem.

--------------------------------------------------------------------------------

Final code

JavaScript CodeCopy content to clipboard

Zepto( function ($){
var win = window,
doc = document;
function setFontSize() {
var winWidth = $(window).width();
// Limit the width above 640
var size = (winWidth / 640) * 100;
doc.documentElement.style.fontSize = (size < 100 ? size : 100) + 'px' ;
};
//Prevent execution when HTML is not fully loaded to ensure the correct page width
setTimeout( function () {
// Initialization
setFontSize();
}, 200);
});

Finally, I would like to add a pitfall I discovered when using rem for adaptation - when the HTML sets a larger fontsize, the margin and padding of the inline elements within the block element will have additional values. The solution is to set the fontsize of the outer block element to 0.

The above method of implementing adaptive mobile web page size is all the content that the editor shares with you. I hope it can give you a reference. I also hope that you will support 123WORDPRESS.COM.

Original URL: http://www.cnblogs.com/daisykoo/archive/2016/05/24/5522958.html

<<: The difference between Display, Visibility, Opacity, rgba and z-index: -1 in CSS

>>: Detailed explanation of Vue save automatic formatting line break