移动web的适配问题

1. 适配问题

移动设备屏幕尺寸不一样，不同型号的手机会有不同大小的屏幕，不同型号的平板也是，就算是我们的PC端也是会有不同大小的屏幕。将在PC端写好的饿页面直接拿到移动端去显示会是怎样的？默认不会出现滚动条，但是会出现缩放。

解决方案：
在《京东商城》移动站中用的是百分比自适应布局，也就是流式布局。同时，需要对移动端的viewport视口进行设置，就会达到适配的目的。

2. 流式布局

流式布局就是百分比布局，非固定像素，内容会根据窗口的大小向两侧填充，可以理解成是流动的布局，这样的布局称为流式布局。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>流式布局</title><style>body {margin: 0;padding: 0;}.box {background-color: antiquewhite;width: 100%;  /*默认就是100%*/}</style>
</head>
<body><div class="box">好好学习天天写代码！写好代码去看李易峰！好好学习天天写代码！写好代码去看李易峰！好好学习天天写代码！写好代码去看李易峰！好好学习天天写代码！写好代码去看李易峰！好好学习天天写代码！写好代码去看李易峰！好好学习天天写代码！写好代码去看李易峰！好好学习天天写代码！写好代码去看李易峰！好好学习天天写代码！写好代码去看李易峰！好好学习天天写代码！写好代码去看李易峰！好好学习天天写代码！写好代码去看李易峰！好好学习天天写代码！写好代码去看李易峰！好好学习天天写代码！写好代码去看李易峰！好好学习天天写代码！写好代码去看李易峰！好好学习天天写代码！写好代码去看李易峰！好好学习天天写代码！写好代码去看李易峰！好好学习天天写代码！写好代码去看李易峰！好好学习天天写代码！写好代码去看李易峰！好好学习天天写代码！写好代码去看李易峰！好好学习天天写代码！写好代码去看李易峰！好好学习天天写代码！写好代码去看李易峰！好好学习天天写代码！写好代码去看李易峰！好好学习天天写代码！写好代码去看李易峰！好好学习天天写代码！写好代码去看李易峰！好好学习天天写代码！写好代码去看李易峰！好好学习天天写代码！写好代码去看李易峰！好好学习天天写代码！写好代码去看李易峰！好好学习天天写代码！写好代码去看李易峰！好好学习天天写代码！写好代码去看李易峰！好好学习天天写代码！写好代码去看李易峰！好好学习天天写代码！写好代码去看李易峰！</div></body>
</html>

3. 视觉窗口viewport

将PC端写好的页面怎么展示在移动端？借助浏览器的手机模拟器。

viewport是移动端特有的，这是一个虚拟的区域，用来承载网页。PC端的页面直接就承载在浏览器窗口里面，而移动端多出了这样一个虚拟区域，用它来承载网页。在移动端，它们之间的关系是：浏览器承载viewport，viewport承载网页。

存在的问题：将写好的页面放在移动端显示，会出现缩放的现象，之前的字体变小了，如何解决这个问题？---- 需要一个适配方案。

适配要求：
1. 网页宽度必须和浏览器保持一致。
2. 默认显示的缩放比例要和PC端保持一致（缩放比例是1.0）
3. 不允许用户自行缩放网页

满足上述的要求，就达到了适配，是国际上通用的适配方案，标准的移动端适配方案。

适配设置
如果什么设置都没有，使用的就是viewport的默认设置，想要达到适配要求，就要去设置viewport。

<meta name="viewport">

书写位置：在head里面并且应该紧跟着编码设置，是为了保证能够优先加载。

viewport的功能
1. width可以设置宽度，height可以设置高度
2. initial-scale可以设置默认的缩放比例
3. user-scalable可以设置是否允许用户自行缩放
4. maximum-scale可以设置最大缩放比例，minimum-scale可以设置最小缩放比例

<meta name="viewport" content="">

其中的content就可以使用以上参数。

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

表示这个viewport的宽度是设备的宽度，默认的缩放比例是1.0，并且不允许用户自动缩放。这个就是国际上标准的适配方案。创建标准适配方案的快捷键：meta:vp。

4. 非主流适配方案：了解。

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

表示缩小一半。原网页的宽度就是现在设备宽度的2倍。

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

表示缩小到原来的1/3。原网页的宽度就是现在设备宽度的3倍。
以上是m.taobao.com在两个不同的移动端设备上的适配，为什么比例不一样？依据是什么？屏幕像素比。

非主流适配方案的特点：
1. 页面的真实尺寸会比在设备上的尺寸要大几倍。
  比如：iPhone4的设备宽度是320px，则它的网页尺寸是640px
2. 缩放操作：有2倍的，有3倍的，这个倍数与屏幕像素比有关系。
理解像素：我们之前用的px指的是页面的尺寸单位，而这里说的屏幕像素指的是物理像素或者像素点。物理像素就是设备显示屏的最小可视颗粒的大小，现在有高清显示屏，视网膜屏，retina屏，基本都是肉眼不可见了。这样的情况下，显示的效果提高了，但是在显示同等质量的图片时会出现模糊效果。在高清显示屏中图片可能会失真。

在屏幕像素比高的设备，图片（非矢量）显示会模糊。屏幕像素比就是指：一个px的宽度能够放几个物理像素。这种非主流的适配方案就是为了提高网页的清晰度，即根据屏幕像素比来缩放网页。但是这样的适配方案非常高，一般使用的还是标准的适配方案。