Mobile-side adaptation JS

There are a lot of mobile adaptation options, and for two years there has been no one standard, and each project is adapted to business needs

Programme one:

Initially listening to Li Yanhui Teacher's course using REM layout for a while, but the font calculation is more cumbersome, and less accurate

Scenario Two:

Accidentally in the Q Group Group of friends to share the dynamic change the root node font scheme layout, the head reference a JS. Write rem,100px = 1rem According to the pixel of the design diagram

//Control FontvarCalculate_size =function() {    varbase_font_size = 100; varDocel =document.documentelement, ClientWidth=Docel.clientwidth; if(!clientwidth)return; DocEl.style.fontSize= Base_font_size * (clientwidth/640) + ' px ';//The values can be changed here according to the design diagram};//If the browser does not support AddEventListener, abort theif(document.addeventlistener) {varresizeevt = ' Orientationchange 'inchWindow? ' Orientationchange ': ' Resize '; Window.addeventlistener (Resizeevt, Calculate_size,false); Document.addeventlistener (' domcontentloaded ', calculate_size,false); Calculate_size ();}

Programme III:

The design size of iphone6 750 is reduced by twice times the width of PX units and is highly fixed. 750px = 375px. This is the most common way to do mobile in the 17

Programme IV:

The great God gives a JS adaptation scheme, dynamically create META tags, dynamically change the viewport. Unit is twice times 1px = 2px. This scheme is still being tried.

//Add a viewport-mate label to zoom the page. !function(useragent) {if(Useragent.match (/applewebkit.*mobile.*/)) {        varScreen_w =parseint (window.screen.width), scale= screen_w/750; if(/android (\d+\.\d+)/. Test (useragent)) {            varVersion = Parsefloat (regexp.$1); if(Useragent.indexof ("MX") >-1 && version >= 5) {                //alert (useragent)document.write (' <meta name= ' viewport "content=" Width=750,minimum-scale = ' + scale + ', Maximum-scale = ' + scale + ', target-densitydpi=device-dpi ">"); } Else{document.write (version> 2.3? ' <meta name= ' viewport "content=" width=750, Minimum-scale = ' + scale + ', Maximum-scale = ' + scale + ', target-density Dpi=device-dpi ">": ' <meta name= "viewport" content= "width=750, target-densitydpi=device-dpi" > ");        }; } Else{document.write (' <meta name= ' viewport "content=" width=750, User-scalable=no, target-densitydpi=device-dpi ">"); }}} (Navigator.useragent);

Mobile-side adaptation JS