移动端网页制作

移动端不同于pc端，移动端的设备众多，不能将长宽高写为固定的宽高，那样的话在不同长宽高比的移动设备上就会显示差距较大，在移动端网页布局的显示不能追求完全的一致，只能是差距不大即可，这是有移动设备的种类繁多决定的。

比较好的布局原则是留白固定，宽高不可固定。

Viewport：

手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>

width：控制 viewport 的大小，可以指定的一个值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
initial-scale: 第一次加载时候的缩放值
maximum-scale：页面最大缩放的比，为1表示页面不可放大。
minimum-scale：允许用户缩放到的最小比例。

主流webapp的设置：

<meta name="viewport" content="width=device-width, init
ial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

表示故意舍弃viewport，不缩放页面

• DPI:（每英寸点数)

• 物理像素: 个数是固定的，这是厂商在出厂时就设置好了的—— 一个设备的分辨率是固定的.

• 在viewport中，获取到的，比如”width-device”，是逻辑像素。所以之前viewport的默认值，所比对的大小，其实是逻辑像素的大小，而非物理像素的大小。

• 以iphone6为例
  分辨率：1334*750
  在不做任何缩放的条件下，iphone6的获取到的’width-device’为375px，由此知设备像素比为2.

PPI一定比DPI大，不会小！！

media

<link rel="stylesheet" href="xxx.css"  media="screen and (max-device-width: 480px)">  

screen表示用于有屏幕的设备，
max-device-width表示屏幕的最大宽度。
上面语句表示：如果加载该页面的设备的屏幕小于480像素，就应用xxx.css式样

参考：

移动端web页面知识小结之像素、物理像素、逻辑像素

DPI 和 PPI 的区别是什么？