Realization of Web Page Size Adaptation on Mobile End

Time:2019-8-9

Finally, the project at hand has been completed, and the missing persons have returned. In the process of doing the project, there are many points worth thinking about, come quickly. The first problem we encounter is the problem of page size adaptation.

At present, the commonly used methods are:

First of all, let the page size fill the screen without overflowing. Simply add viewport in the HTML < head > tag (as follows). The parameters are: page width = screen width, maximum and minimum scaling ratio are 1, user is not allowed to zoom.

XML/HTML CodeCopy content to clipboard
  1. <meta name=“viewport” content=“width=device-width,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no”>  

Percentage adaptation: Convert the unit of length to a percentage, so that the length and width of the element will vary with the width.

Advantages: Seamless connection between widths, relatively convenient operation.

Disadvantage: Font size needs another set of adaptive methods to adjust; when the screen width is greater than 700 px, it will be more difficult to continue to adjust according to percentage elements.

* rem, EM adaptation: the fontsize of < HTML > or < body > is changed under different screen widths by means of media query. Then REM and em are used instead of PX to realize self-adaptation.

Advantages: It can be set according to different screen widths, which can perfectly solve the problem of proportion when the screen is too large. There is no problem with font size.

Disadvantage: Seamless transformation can not be achieved by setting the width interval.

——————————————————————————–

These compatible methods have their own advantages and disadvantages. They are not perfect. How can we combine the advantages and avoid the disadvantages?

When referring to Taobao’s adaptive method, it was found that fontsize of page < HTML > would adjust automatically according to the width of the screen, and the width of the screen and the size of the font set were fixed.

So it is assumed that after acquiring the screen width with JS, it can be reduced as the unit length of REM in a fixed proportion to achieve self-adaptation.

Isn’t that all the advantages of the solution!? Allow me to get excited.

——————————————————————————–

JS code is very simple to write and perfectly solves the problem of seamless cohesion in rem settings.

But after the mobile test, the problem arises. Safari on the mobile side executes JS in a hurry before the html is loaded. Before the page is not set according to the viewport, JS reads the wrong width, which makes the element twice as big as 0^ 0. SetTimeout () is needed to solve the problem.

——————————————————————————–

Final code

JavaScript CodeCopy content to clipboard
  1. Zepto(function($){   
  2.     var win = window,   
  3.         doc = document;   
  4.   
  5.     function setFontSize() {   
  6.         var winWidth =  $(window).width();   
  7.         // Restriction above 640 width  
  8.         var size = (winWidth / 640) * 100;   
  9.         doc.documentElement.style.fontSize = (size < 100 ? size : 100) + ‘px’ ;   
  10.     };   
  11.        
  12.     // Prevent execution when html is not loaded, and ensure the correct page width  
  13.     setTimeout(function(){   
  14.         // Initialization  
  15.         setFontSize();   
  16.            
  17.     }, 200);   
  18.     
  19. });  

Finally, rem is added as a pit found in the process of self-adaptation – when html is set to fontsize larger, margin and padding in block elements will appear additional values. The solution is to set fontsize of outer package to 0.

The above method of realizing the size adaptation of mobile web pages is all the content shared by the editor. I hope to give you a reference, and I hope you will support developpaer more.

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

Recommended Today

Implementation of PHP Facades

Example <?php class RealRoute{ public function get(){ Echo’Get me’; } } class Facade{ public static $resolvedInstance; public static $app; public static function __callStatic($method,$args){ $instance = static::getFacadeRoot(); if(!$instance){ throw new RuntimeException(‘A facade root has not been set.’); } return $instance->$method(…$args); } // Get the Facade root object public static function getFacadeRoot() { return static::resolveFacadeInstance(static::getFacadeAccessor()); } protected […]