移动站适配学习记录

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

一，视口的知识

布局视口(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...