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

Vue project packaging, merging and compression to optimize web page response speed

How to implement mobile web page size adaptation

Vue project packaging, merging and compression to optimize web page response speed

MySQL GTID comprehensive summary

Detailed explanation of the use of Teleport in Vue3

Share 20 excellent web form design cases

Example of how to use CSS3 to layout elements around a center point

Linux file/directory permissions and ownership management

MySQL latest version 8.0.17 decompression version installation tutorial

Detailed explanation of the idea of distributed lock in MySQL with the help of DB

Example code for implementing card waterfall layout with css3 column

js implements custom drop-down box

Recommend

Learn how to use the supervisor watchdog in 3 minutes

MySql5.7.21 installation points record notes

Introduction to the use and advantages and disadvantages of MySQL triggers

Detailed explanation of several clever applications of position:sticky sticky positioning

Detailed explanation of adding click event in echarts tooltip in Vue

Solve the problem of multiple listeners reported when starting tomcat in Idea

Installation tutorial of docker in linux

How to install docker and portainer in kali

Vue uses canvas handwriting input to recognize Chinese

Detailed explanation of Linx awk introductory tutorial

Getting Started Guide to Converting Vue to React

Some experience in building the React Native project framework

Vue+Element UI realizes the encapsulation of drop-down menu

Solve the problem of using swiper plug-in in vue

MySQL InnoDB MRR Optimization Guide