html页面一个屏幕大小不一样,关于web页自动适配屏幕大小

一、先了解下html5的viewport使用

随着高端手机(Andriod,Iphone,Ipod,WinPhone等)的盛行，移动互联应用开发也越来越受到人们的重视，用html5开发移动应用是最好的选择。然而，每一款手机有不同的分辨率，不同屏幕大小，如何使我们开发出来的应用或页面大小能适合各种高端手机使用呢？html5 viewport的使用能帮你做到这一点.

viewport 语法介绍：

看下面的meta name="viewport"部分，

content="

height = [pixel_value | device-height] ,

width = [pixel_value | device-width ] ,

initial-scale = float_value ,

minimum-scale = float_value ,

maximum-scale = float_value ,

user-scalable = [yes | no] ,

target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]

"/>

...

width：控制 viewport 的大小，可以指定的一个值或者特殊的值，如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。

height：和 width 相对应，指定高度。

target-densitydpi：一个屏幕像素密度是由屏幕分辨率决定的