移动webapp页面适配方案

浏览数：35 / 时间：2015年06月11日

Viewport(视口)

概念

In web browsers, the viewport is the visible portion of the entire document.

移动端浏览器在一个通常比屏幕更宽的虚拟”窗口“（视口）中渲染页面，从而无需将所有页面都压缩进小屏幕里（那样会把很多没有针对移动端进行优化的站点打乱）。用户可以通过平移和缩放来浏览页面的不同区域。
大部分的移动端浏览器使用一个默认的视口宽度，这意味着视口将会用这个尺寸放大页面，使所有的元素放进这个视口，从而渲染整个页面。

各个浏览器的默认视口宽度

Safari	Opera	Android WebKit	IE
980px	850px	800px	974px

dp和px的换算公式

换算公式px = dp*(dpi/160)

等值的CSS里面的px在手机屏幕上占多大的位置，这不是固定的，还要取决于屏幕的DPI。因为手机会根据DPI，对页面进行自动缩放来协调屏幕像素和尺寸之间的比例来显示效果,基值是160dpi。意思是160dpi的设备里（一般分辨率是320*480），1dp = 1px。我们不关注dp是什么，我们关注的是px，当前设备的dp:px是多少，也就是页面在分辨率高于或者低于320宽度分辨率的时候，对应的缩放比例（其实也就是个概念，就是webkit浏览器自己做的缩放，来适配不一样的设备。我们只要记住320，1dp=1px就行了，后面的往下看）。

什么是dp

Density-independent pixels，一个基于计算机坐标系统的物理测量单元，代表一个抽象的像素并用于基础系统的app，如何换算成物理像素，以160PPI屏幕为标准，则1dp=1px

DPI/PPI

Pixels per inch

如何计算

分辨率

一种在手机尺寸下可以显示的像素个数，比如，640*960分辨率意味着宽度是960个像素而高度是640个像素。

屏幕尺寸

手机屏幕对角线的长度，例如3.5英寸的手机。

计算

px = dp*(dpi/160)

330/160=2.0625

1dp等于2.0625个css px

viewport参数

width	视口宽度，各个浏览器的默认视口宽度不同。范围：200-10,000.也可设成device-width
height	视口高度，范围：223-10,000 也可设成device-height
initial-scale	页面首次显示时的缩放值，范围由minimum-scale和maximum-scale决定
minimum-scale	页面显示时最小的缩放值，默认值：0.25，范围：>0-10.0
maximum-scale	页面显示时最大的缩放值，默认值：5.0，范围：>0-10.0
user-scalable	决定用户是否可以放大或者缩小页面。值可取：yes，no。默认值：yes。设置成no，同时也可以阻止页面滚动，当输入文本到文本框的时候。