viewport:
你可以定义viewport的宽度.如果你不使用width=device-width,在移动端上你的页面延伸会超过视窗布局的宽度(width=980px),如果你使用了width=device-width,你的页面将会显示为合适的移动端宽度(width=320px),我们可以使用meta标记:
viewport - target-densitydpi
在说这个属性之前,先说一下pixel-px.以电脑桌面为例,在同一个显示器下,不同分辨率下有不用显示,在高分辨率下桌面图标会显示得小一些,而低分辨率下图标会显示得大一些.
android 介绍了target-densitydpi.当设置target-densitydpi=device-dpi时,在同样大的手机屏幕上,图片和文字在高分辨率的设备上会显示得小一些,反之,在低分辨率的设备上会显示得大一些.
viewport - scaling
 在大多数手机上,默认的缩放在手机浏览器上可能会触发zoom.为了阻止用户缩放,你可以设置initial-scale=1.0,下面是移动视窗的完整写法:
media queries
css media queries - max/min-device-width
max-width and min-width are updated when you rotate the screen, your max-width in portrait mode become max-height in landscape mode
 当你旋转手机屏幕的时候max-width和min-width就会更新,横向的最大宽度在纵向上就会变成最大高度,如图所示:
@media only screen and (min-width : 480px) { .box { width:200px; height:200px; background:yellow; } }@media only screen and (max-width : 320px) { .box {width:200px; height:200px; background:red; } }
注意:max/min-width和max/min-device-width的区别.
从字面意思来看一个是最大/最小宽度,一个是最大/最小设备宽度.如果设置了width=device-width,在横屏模式下max/min-width和max/min-device-width是一样的,但是在纵屏模式下不同.简单来说,就是在你旋转屏幕时max/min-width将会更新,但是max/min-device-width不会更新.
css media queries - device-pixel-ratio
 device-pixel-ratio可以让我们知道设备屏幕的分辨率,一些手机的像素比会大于等于1.5,如果你想实现高分辨率设备上的布局,可以使用下面的media query:
@media only screen and (-webkit-min-device-pixel-ratio : 1.5),
       only screen and (-o-min-device-pixel-ratio: 3/2), 
       only screen and (min-device-pixel-ratio : 1.5) { 
  .imagebox {background:(url:images/high/demo.jpg);} 
}
 注意:如果使用了上面的方法,即使没有使用上面的规则图片一样会加载.
css media queries - 方向
 iphone和ipad都有横屏和竖屏,使用下面的media query可以分别在横屏和纵屏上使用相应的css
/* ipads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
  /* styles */
}
/* ipads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
  /* styles */
}