移动站适配学习记录

最近在学习移动前端开发的相关知识，在这里作个记录，方便之后查看。

一，视口的知识

布局视口(layout viewport)

它的做用是给css布局限制一个最大宽度；

（pc/移动端）布局视口尺寸能够经过document.documentElement.clientWidth/clientHeight获取；

pc端

（1）屏幕尺寸

经过screen.width/height能够获取显示屏的宽和高；

（2）布局视口

在pc端，css布局视口等于浏览器窗口的内在尺寸。
浏览器窗口的内在尺寸经过window.innerWidth/Height获取；window.innerWidth包含了滚动条的宽度；
在没有滚动条的时候，经过window.innerWidth和document.documentElement.clientWidth值是同样的；

移动端

（1）布局视口

浏览器厂商为了让用户在小屏幕下网页也可以显示地很好，因此把布局视口宽度设置的很大，通常在 768px ~ 1024px 之间，最多见的宽度是 980px。

因此，在手机上，布局视口与移动端浏览器屏幕宽度再也不相关联，是彻底独立的，这个浏览器厂商定的视口被称为布局视口。

（2）视觉视口（visual viewport）

在移动设备端，视觉视口能够简单的理解为设备的物理屏幕的可视区域。它用来承载布局视口。

视觉视口的值是固定的，只和设备的型号有关。它的大小和css像素值是相同的。能够经过window.innerWidth/innerHeight来获取。好比：

　　iphone4 : 320*480px;

　　iphone6 : 375*667px;

（3） 理想视口（ideal viewport）

布局视口明显对用户是不友好的，彻底忽略了手机自己的尺寸。因此苹果引入了理想视口的概念，它是对设备来讲是最理想的布局视口尺寸。理想视口中的网页对用户来讲，是最理想的宽度，用户进入页面的时候不须要缩放。

如今讨论所谓的『最理想的宽度』究竟是多少？其实，若是咱们把布局视口的宽度改为屏幕的宽度不就不用缩放了么。常见的能够以下设置viewport meta标签；

<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">

二，移动站适配的方法

1，经过rem布局 + 媒体查询实现

思路：在不一样分辨率范围，给html设置不一样的font-size大小。页面基于rem来布局，从而实如今不一样分辨率的设备里看到相同的效果。
实现：
（1）设计稿基于iphone6,为750px宽。设置一个基数50（即在750px的设计稿里，html字体大小设置为50px，body字体大小设置为24px），750/50=15rem，便可以获得页面对应的rem数值。其它元素均可以经过px/50的方式转换成rem值来进行布局。
（2）计算出在不一样分辨范围里的html字体大小，从而使页面自动调整样式。以min-width:320px为例，html字体大小为：320/15= 21.3333333px；即在320--359范围内，html字体大小为21.3333333px;在min-width:360px范围内，360/15=24px;
例子：【参考网站：http://m.suning.com/】

缺点：很难肯定合适的临界点；

2，直接经过流式布局实现

思路：对于一些简单的移动站，直接能够用百分比来实现宽度自适应，高度用px固定便可
实现：
（1）顶部和底部，宽度100%，高度px设置，字体应用rem来设置，可是这里并无设置不一样分辨率下的html的字体大小，所以使用默认的字体大小16px来进行换算，字体仍是固定大小。

例子：【参考网站：https://m.lagou.com/】

补充：对于列表，这里的布局实现方式以下，它是经过左边图片向左浮动，再给右边内容容器设置一个padding-left值来实现。在移动端，还能够运用flex弹性布局来实现。

3，利用JS来动态更改html字体大小

思路：假设拿到的设计稿是750px宽；设置一个基数100px，获得设计稿宽度为7.5rem;便可以获得html字体的计算方式：750/7.5 = 100px;利用js按此方式来动态更改html字体大小。
document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + "px"; 
实现：
（1）设计稿基于iphone6,为750px宽。页面元素的布局，以设计稿里的像素值除以100便可获得对应的rem值。

例子：【参考网站：http://3g.163.com/touch/all?n...】

4，利用JS来动态缩放布局视口

思路：前面几种方法，都须要添加"<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">"，保证以理想视口（宽度等于css像素）来布局。在当前这种适配方案里，倒是让布局视口的宽度等于设备的物理像素，而后将布局视口进行缩放，从而实现以理想视口来布局。
实现：
（1）设计稿基于iphone6,为750px宽。iphone6的物理像素为750px,设置一个基数10(即此时设计稿宽为10rem)，html字体大小为：750/10 = 75px;根据这个字体大小能够计算出页面其它元素的rem值；
（2）device-width:指代比例为100%时(即scale=1)屏幕宽度的CSS像素数值。device-width的计算公式为：设备的物理分辨率/(devicePixelRatio scale)；要保证device-width等于物理分辨率，须要获取devicePixelRatio值，这个值是固定的，所以，只要devicePixelRatio scale = 1，便可知足要求。
【我的理解：这里的device-width只是值和css像素值相同，设备的css像素值是不能改变的。device-width却能够调整大小。】
（3）iphone6的devicePixelRatio=2， scale = 0.5，原来布局视口等于设备物理像素等于750px，缩放0.5倍后，布局视口宽度为375px;等于理想视口。
“<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">”
例子：【参考网站：https://m.taobao.com/#indexht...】

参考文章：
1，https://gold.xitu.io/entry/57...
2，http://blog.doyoe.com/2015/10...
3，https://github.com/riskers/bl...
4，http://www.cnblogs.com/well-n...