Mobile screen adaptation principles and methods explained

Preface:

Today in Sunday, I was sitting in the Huangpu District library thinking about the adaptation of mobile screens. As a young front-end Ma Song , no, is the code farm, mobile screen adaptation of the program's post has not read 100, also read dozens of articles. But today I'm thinking about it again, because next week I have a speech about mobile adaptation. Life is so short, but I devote a limited amount of time to the infinite Front road.

According to my not (Cong) Ming (Jue) (ding) of the brain's hard thinking. I found that at this stage of the more popular mobile adaptation principle only one-is the element to zoom in and zoom out, specific to the implementation of the method there are two (do not hit the face). One is the size of the Web page only to enlarge the elements of the REM unit value scaling method, and the other 1 is directly to the entire Web page zoom reduction method. Why haven't you heard these two methods? Because the names of the two methods are all my own, not yet famous.

2. rem unit value scaling method, specifically to let 1rem corresponding PX value depending on the phone's different, may be 1rem equals 10px on the Iphne5, On the Iphone6 1rem is equal to 11.7px (iphone6 screen width is 1.17 times times the width of the iPhone5 screen, so 1rem corresponding PX value also 1.17 times times). The specific 1rem value is how much, can be calculated by JS or CSS3 media query. The elements on the page then use REM as the dimension unit. Iphone5 on the good performance of the page, put on the iphone6 on the time, because the REM corresponding PX value is magnified, so the size of all the elements of the position is also enlarged, so in the Iphone6 natural performance is good. There are two ways to modify REM values.

   1.1 Use JS to modify the FontSize value size of the HTML.

   1.2 use media queries to modify the FontSize value size of the HTML.

4. Web Page Scaling Method: This method is simple violence, make people in the heart often afraid of fear. The specific approach is to use a mobile phone as the benchmark, is generally iphone5. In the iphone5 to make a good page, finished the page after the page to add a part of the JS, the role of JS is to get the width of the screen and then compare with the iphone5, than the iphone5 width of the page to enlarge, than the narrow page of the iphone5 pages to reduce the page. For example, IPhone6 's mobile phone screen width is iphone5 1.17 times times, through JS to enlarge the entire Web page 1.17 times times. Jiangzi on the Iphone5 Good performance page on the iphone6 on the no problem. Specifically how to zoom out, there are two ways.

   2.1 Scale The HTML element, using the Transfrom or Zoom property.

   2.1 Initial-scale, Minimum-scale, and maximum attributes using meta tags

See here, you may have a question, why we are based on the width to adjust the page and not according to the height AH. According to my experience of copying others, height adjustment is relatively easy, give the bottom element a bottom positioning can be. No, you just squeeze in the middle, and the way I say it is just the principle, and if you want to be perfect, you have to use it.

If you read the preface of the 1, 2, congratulations, you have mastered the mobile side of the nine-yang to adapt to the martial. The following is the time to get through the two veins, the bones of the surprised people can drift over.

1.rem unit Value Scaling method

PS: This name is from me.

What is 1.1 rem?

Definition:font size of the root element

To translate: REM is the font size of the root element. The root element of a Web page is the HTML element, so REM is the font size of the HTML element.

Assuming the HTML font size is 16px, then 1rem is 16px. Assuming that the HTML font size is 10px, then 1rem is 10px.

1.2 The relationship between REM values and design drafts1.2.1 Design Draft size

The design of the mobile end is generally based on iphone5 design, in order to display clearly, the size of the design is usually twice times the size of the screen. For example iphone5 size is 320x568, so design draft generally 640x1136. According to the different circumstances, the design draft also has 640x1008 and 640x960. Height is easy to adjust, the width can be guaranteed to be twice times.

Because the design draft is based on iphone5 design, so we have to make the best time to iphone5, so that better calculation. Other screens can be adapted as long as our pages are zoomed in and out.

1.2.2 Setting the size of the REM value

Since we are using REM unit value scaling, it is important to first make sure that the 1rem value is equal to how many PX is appropriate. In fact here is more casual, you love to set how much can be set to how much. Of course, from a practical point of view, the REM value set to 10px or 100px will be better, because the calculation is convenient. Here we take 1rem equals 10px for example

At this point we need to add the following CSS to the page

html{  font-size:10px;}

Because all browsers default font size is 16px, so we can also set the HTML FontSize to 62.5% (10/16*100%);

html{  font-size:62.5%;}

So we 1rem is 10px.

PS, by default the browser allows the minimum font size is 12px, even if you set the font to 10px, the browser will be displayed in 12px. In order to solve this problem, you need to set a style on the HTML;

html{  Text-size-adjust:none;  -webkit-text-size-adjust:none;}

　

1.2.3rem values correspond to design drafts

Because 1rem=10px. So when you convert PX to REM, just divide the PX value by 10 and convert the unit from PX to REM. corresponding to the design draft, because the size of the design is twice times the size of the screen, so the size of the design manuscript from PX to REM is divided by 20 (the design manuscript is reduced by twice times, so that the design is as large as the screen size, divided by REM and px10 times the corresponding relationship). Suppose the design manuscript has an image with a width height of 100px, and the corresponding REM value is 5rem (100/2/10).

the corresponding relationship between the 1.2.4rem value and px.

In fact, this point does not have to say, 1rem is 10px. But avoiding 1.2.3 is misleading, so special instructions.

Suppose you are on the Chrome developer tool, set the width of the element to 100px. Then the corresponding REM is converted to 10rem (100/10) rather than 5rem (100/2/10). Because this 100px is relative to the 320px screen rather than the 640 design, you don't have to divide by 2.

1.2.5 Other screen adaptations

After the first 4 points, your design draft should already be able to display normally on the iPhone5. When you look at it with iphone6, your page may be out of the way. Because you have not yet iphone6 the page, that is, you have not modified the size of the PX value of REM corresponding to the IPhone6.

1.2.5.1 using JS to modify the size of REM values

This method is relatively simple, get the other phone screen relative to the size of the iphone5 phone screen, and then enlarge and reduce the HTML fontsize value. One drawback of this approach is that the fontsize value may be decimal, which may cause the text on the page to appear blurry. As long as the fine-tuning can not be a big problem. The JS code is as follows:

(function () {  var scale = window.innerwidth/320;  Document.documentElement.style.fontSize = 10*scale+ "px";}) ()

Using the above code is a prerequisite, that the page must be added to this HTML code.

<meta name= "viewport" content= "width=device-width,minimum-scale=1,maximum-scale=1" >

The reasons are as follows:

In the mobile development process, the early mobile phone in order to display the normal PC page, the phone default viewport width is not the width of the phone screen, the general default viewport width of 980px, of course, the default width of the phone is 1280px. So if you don't set the width of the viewport to Device-width, Window.innerwidth is the default value of 980px or 1280px. So we have a problem with the last piece of code. What we get with window.innerwidth is not the width of the screen, so the scale we find is wrong.

There are two workarounds, one of which is the HTML code of the meta, which sets the width of the viewport to device-width. It is recommended to use this method (in fact, the current mobile page has this code). The second way is to switch to Screen.width instead of using Window.innerwidth.

var scale = screen.width/320;

Click to see Demo1.2.5.2 Using media query adaptation

Use media queries to set the size of the HTML element font-size. This method is simple but a lot of work, one needs to know the market all the mainstream mobile phone screen size, and if the future of the new model number will then appear when the page does not fit the situation. At that time, this method is quite simple, the media query CSS as follows:

html{font-size:62.5%;} @media screen and (min-width:360px) and (max-width:374px) and (orientation:portrait) {html {font-size:70.3%;}} @media screen and (min-width:375px) and (max-width:383px) and (orientation:portrait) {html {font-size:73.24%;}} @media screen and (min-width:384px) and (MAX-WIDTH:399PX) and (orientation:portrait) {html {font-size:75%;}} @media screen and (min-width:400px) and (max-width:413px) and (orientation:portrait) {html {font-size:78.125%;}} @media screen and (min-width:414px) and (max-width:431px) and (orientation:portrait) {html {font-size:80.86%;}} @media screen and (min-width:432px) and (MAX-WIDTH:479PX) and (orientation:portrait) {html {font-size:84.375%;}} The following is the ipad resolution @media screen and (min-width:480px) and (MAX-WIDTH:639PX) and (orientation:portrait) {html{font-size:93.75 %;}} @media screen and (min-width:640px) and (orientation:portrait) {html{font-size:125%;}} 

Click to see Demo

1.3 Summary

REM Unit-value scaling, in principle, is simple, that is, the 1rem corresponds to the PX value according to the different screen. When the page is finished on one screen, the REM value is zoomed in and out as it appears on the other screen, depending on the size of the screen relative to the standard screen. One of the methods of using JS to modify REM, the simplest is also best to use, in different screen performance is also very good.

2. Web page Zoom method.

The unit requirements for CSS here are not very large, you can use REM (here 1rem corresponds to the PX value of different screen is unchanged), you can also use PX. It was better to use REM at the time. Because using REM you can easily switch to other suitable formulations

2.1 How to make a design draft

This is actually nothing to say, just like the normal PC-side production page. But there are points to remind, if you are 640 of the design of the iphone5 under the production, if you are 750 of the design you iphone6 production. When you are finished, you can turn PX into REM if you like, and use px if you don't like it. As to how to choose the main or look at your sister's Yan value.

2.2 Zooming a Web page using CSS Properties

The CSS property here refers to the CSS's Zoom property instead of the transform scale property, because zoom is a bit different from scaling, the simplest of which is two, and the zoom is based on the top left corner, and the scales are based on the center of the element, The second difference is that zoom is real to zoom in and out of the element, while scale simply scales the appearance, and the actual size of the element does not change.

Assuming the design is still 640px, we have finished making the page in Iphone5, in order to achieve compatibility with other mobile phone screen effect. We want to add a section of JS on the page, the function of this JS is to get the width of the screen, and then compare with the iphone5 screen size, if larger than the iphone5 screen, we will enlarge the page, if it is smaller than the iphone5 screen we reduce the page. Zooming in and out of a page is actually zooming in and out of HTML elements. can also enlarge or reduce the BODY element, but the scaling BODY element has bug,html small body large will overflow, body small HTML large, the bottom will be blank. So scaling HTML elements is the best.

(function () {var zoom = screen.width/320;  Document.documentelement.style.zoom=zoom;}) ();

Click to see Demo

2.3 Web page scaling using meta tags

In addition to using CSS properties for page scaling, we can also use the name viewport (Windows) Meta tag to scale the page, which was first implemented by Apple in the browser, but has now been supported by almost all mobile browsers. In order not to face I added "almost", in fact, you see the browser supports this attribute, so use it boldly, do not worry.

The META tag with name viewport (Windows) has the following properties

Width	Width of the window
Initial-scale	Sets the initial zoom value of the page, which is a number that can be taken with decimals
Minimum-scale	Allows the user's minimum zoom value to be a number that can be taken with decimals
Maximum-scale	Allows the user's maximum zoom value, which is a number that can be taken with decimals
Height	Set the height of the window, this property is not important to us, seldom use
User-scalable	Whether the user is allowed to scale, the value is "no" or "yes", no is not allowed, yes means allow

Where the Initial-scale, Minimum-scale, and Maximum-scale properties are the pages zoomed in and out. Our common meta is jiangzi. The width of the window is device-width (the screen width of the device), the minimum magnification and maximum magnification are 1, which means that the page is not allowed to zoom in and out.

<meta name= "viewport" content= "width=device-width,minimum-scale=1,maximum-scale=1" >

Pages that add this meta tag are all adapted using REM unit value scaling. Now we need to use the page scaling method to modify the META tag, you can use JS to get the META tag and then use setattribute to modify, you can also use JS directly write out the META tag. I use the direct write method, which is relatively simple. Remember this JS to load the head tag.

(function () {var scale = screen.width/320;  document.write (' <meta name= ' viewport "content=" width=320,minimum-scale= ' +scale+ ', maximum-scale= ' +scale+ ' "> ‘)})()

There are 22 of the above code to pay special attention, the first place is the scale of the time, the use of screen.width/320. Rather than window.innerwidth. The second place is the width of the viewport we are fixed is 320. Rather than device-width.

Explain the second place first, because we are making the page under Iphone5, for other screens, we compare it to the size of the Iphone5 page, and then zoom in and out of the IPhone5 page. So the width of our viewport can not be different from the screen, it must be fixed to the iphone5 screen.

Explain the first place again. If the width of the viewport is not device-width then window.innerwidth gets it is not the breadth of the screen. There is no meta before our JS code, so using window.innerwidth at this point is the default viewport width of 980 or 1280px for the browser.

Click to view Demo

2.4 Summary

The principle of the Web page scaling method is to use a mobile phone (usually iphone5) as the benchmark, when displayed on other phones, the screen width of the phone through JS, and then compare with the reference phone, using CSS properties or meta tags to zoom the page hit. Web page Scaling method is not used in many practical applications. The REM unit-value scaling method is more used in practical applications. But these two methods are really useful.

3.Canvas adaptation.

When we play games, we make them almost on canvas, and this is a question of how canvas fits. It looks very difficult, in fact it is very simple. But it took me a couple of weeks to figure it out. That's when I was learning Createjs. Although I have not learned to Createjs now, I have studied how to do the adaptation under the canvas, or a bit of harvest. The canvas adaptation principle is the same as DOM, which enlarges and shrinks the page. Principle this thing looks like a nonsense, but really will apply you will find that this is a big killing device AH. You can only deal with one problem when you master a certain skill, but you master the principle and you can kill a large piece.

3.1 Canvas Zoom

Canvas's scaling industry is a common practice for canvas-style widths and heights (note: This is about the width and height of the style property of the canvas, not the width and height of the canvas). Of course there are many ways to scale, and you can imagine other crooked ideas. Since I have been writing very annoying, hey, mainly people old and sickly, I will only introduce the next wide-height scaling method.

Canvas page production time or a cell phone as the benchmark, 640 of the mobile phone to iphone5, 750 of the mobile phone to iphone6 as the subject. For example, I take iphone5 as the standard. Then my canvas can be written like this.

<canvas id= "MyC" width= "" "height=" 568 "></canvas>

You also define some CSS styles because the canvas is an inline element, and the 3-5px between the inline and inline elements is the default. Although we only put a canvas element in the body, we actually use a space in the body, and the space is the inline element. So if you put the canvas directly in the body there is a little bit of a problem. Under Iphone5, the canvas "looks" as if it was too large, causing the page to scroll down. Just already said, this problem is because the line element has a default spacing caused, so as long as the spacing is removed, the solution is to set the body of the font-size is 0.

CSS styles are as follows:

html,body{  margin:0px;  padding:0px;  Background:black;  font-size:0px;  width:100%;  height:100%;} canvas{  Position:absolute;  Background:white;}

3.1.1 The original aspect ratio to scale the canvas, whichever is the width

In this case, different mobile phones to view the page, the width can be just full screen, height if the screen is too long, the canvas will be blank, if the screen is too short, the page will appear scroll bar.

The appropriate code is as follows:

var can = document.getElementById ("MyC"); var canw=320; var canh=568; var canstylew = screen.width; var canstyleh = screen.width/(canw/= canstylew+ "px"= canstyleh+ "px";

Click to view Demo

3.1.2 The original aspect ratio to scale the canvas, whichever is higher

In this case, on different phones to view the page, the height of the page will always be full screen, but on the width, if the phone screen is too wide, there will be blank. If the screen is too narrow, a scroll bar appears. The following code, which I've added to the canvas, is centered.

The appropriate code is as follows:

var can = document.getElementById ("MyC"), var canw=320;var canh=568;var Canstylew = screen.height* (Canw/canh); var Canstyleh = Screen.height;can.style.width = canstylew+ "px"; can.style.height = canstyleh+ "px"; can.style.left = ( Screen.width-canstylew)/2+ "px";

Click to view Demo

3.13 Scale canvas based on screen aspect ratio

In this case, we want to get the aspect ratio of the screen, and then compare with the aspect ratio of the iphone5, the large words indicate that the screen width of a large height is small, may cause our canvas display is not complete and up and down the scroll bar, then we will be the height of the adaptation. Small words indicate that the screen width is relatively small height is large, which may lead to the left and right direction of the display is not complete. So we have to adapt to the width of the match. Our goal is only one, which is to display our canvas completely on one screen.

The appropriate code is as follows:

varcan = document.getElementById ("MyC");varcanw=320;varcanh=568;varRatio= Canw/canh;varScreenratio = Screen.width/screen.height;varCanstylew,canstyleh;//large width, whichever is the heightif(screenratio>=ratio) {Canstylew= screen.height*ratio; Canstyleh=screen.height;}Else{  //height is large, whichever is the widthcanstylew=Screen.width; Canstyleh=screen.width/ratio;}can.style.width= canstylew+ "px"; Can.style.height= canstyleh+ "px"; Can.style.left= (Screen.width-canstylew)/2+ "px";

Click to see Demo

3.2 Summary

Canvas adaptation is also used to enlarge and shrink, the principle is very simple. Of course, the adaptation scheme in the example above is still very coarse and must be optimized in the actual development environment. I just wanted to put the principle, so I didn't give a complete plan. Of course, I only talked about an adaptation scheme, and there must be other adaptation options, or better adaptation options. Or that sentence, the principle is the same, if the use of the principle is your business.

4, Big summary:

The mobile screen fits roughly this, either zooming in on the elements or zooming out the page. I do not know you see, but I personally do understand, did not write a blog before I was still confused, haha, the purpose achieved. It's not that hard to fit on the mobile side. Hope this blog is helpful to you. PS A word, there are problems themselves to write more code, practice a genuine knowledge.

Mobile screen adaptation principles and methods explained