Mobile Station adaptation Learning record

Recently in the study of mobile front-end development of relevant knowledge, here to make a record, easy to see later.

One, the knowledge of the viewport

Layout viewport (layouts viewport)

Its role is to limit the CSS layout to a maximum width;

Layout viewport size can be obtained by document.documentelement.clientwidth/clientheight;

PC-Side

(1) Screen size

The width and height of the display can be obtained by screen.width/height.

(2) Layout viewport

On the PC side, the CSS layout viewport equals the intrinsic size of the browser window.

The inner dimensions of the browser window are obtained by Window.innerwidth/height; Window.innerwidth contains the width of the scroll bar;

When there is no scroll bar, the window.innerwidth and document.documentElement.clientWidth values are the same;

Mobile side

(1) Layout viewport

Browser Manufacturers in order to let users in the small screen can also display the page is very good, so the layout viewport width set a large, generally between 768px ~ 1024px, the most common width is 980px.

Therefore, on the phone, the layout viewport and mobile browser screen width is no longer associated, is completely independent, this browser factory agreed to the viewport is called the layout viewport.

(2) Visual viewport (visual viewport)

On the mobile device side, the visual viewport can be simply understood as the visual area of the physical screen of the device. It is used to host layout viewports.

The value of the visual viewport is fixed and is only relevant to the model of the device. Its size and CSS pixel values are the same. Like what:

iphone4:320*480px;

iphone6:375*667px;

(3) Ideal viewport (ideal viewport)

The layout viewport is obviously unfriendly to the user and completely ignores the size of the phone itself. So Apple introduces the concept of ideal viewport, which is the ideal layout viewport size for devices. The ideal viewport of the Web page for the user, is the most ideal width, the user does not need to zoom into the page.

Now what is the "ideal width" to discuss? Actually, if we change the width of the layout viewport to the width of the screen , we don't need to scale it. Common viewport meta tags can be set as follows;

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

width
用来定义layout viewport的宽度；在这里，将device-width的宽度值赋给layout viewport；device-width即为设备宽的css像素个数；如果不指定width属性或者scale属性，或者移除viewport meta标签，则布局视口将恢复默认的值，如iphone为980px;

initial-scale
initial-scale用于指定页面的初始缩放比例，也可以实现理想视口。如下，表示将布局视口按device-width的1倍缩放。即布局视口大小等于设备宽度；

<meta name="viewport" content="initial-scale=1">

【参考文章：
http://blog.doyoe.com/2015/10/13/mobile/%E7%A7%BB%E5%8A%A8%E5%89%8D%E7%AB%AF%E7%AC%AC%E4%B8%80%E5%BC%B9%EF%BC%9Aviewport%E8%AF%A6%E8%A7%A3/
https://github.com/riskers/blog/issues/17
https://gold.xitu.io/entry/57d0cf732e958a005448f286
】

Mobile Station adaptation Learning record