6 在移动设备上设置原始大小显示
在iPhone系列和iPod touch使用的是Safari浏览器， 支持前面介绍的媒体查询表达式。 例如，使用iPhone分辨率是320px × 480px 去访问我们前面的布局示例，却不是我们想看到的结果， 并不是从上到下排列显示， 而是和电脑显示器访问的布局是一样的。为什么会这样？因为在iPhone中使用的Safari浏览器在进行页面显示时是将窗口的宽度作为980px进行显示的， 因为太多网页是按照800px左右标准进行制作的， 所以Safari浏览器默认按照980px的宽度来显示，就可以正常显示绝大多数的网页了。
所以即使在页面中已经写好了页面在小尺寸窗口中运行的样式， iPhone中的Safari浏览器也不会使用这个样式， 而是选择窗口宽度为980px时所使用的样式。 所以我们需要在移动设备上设置原始大小显示和是否缩放的声明。是在页面的头部<head></head>之间加上下面这样的语句∶
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
或
<meta name="viewport" content="width=600px " />
meta 标签的viewport属性是在移动设备上设置原始大小显示和是否缩放的声明。可以使用的参数设置如下∶
width ： viewport的宽度
height ： viewport的高度
initial-scale ： 初始的缩放比例
minimum-scale ： 允许用户缩放到的最小比例
maximum-scale ： 允许用户缩放到的最大比例
user-scalable ： 用户是否可以手动缩放
如果在页面中已经准备好了在小尺寸的窗口中使用的样式， 并且有可能在iPhone或iPod touch中被打开时，请不要忘记了加入<meta>标签并在标签中写入指定的窗口宽度。其实还可以通过viewport把自己冒充成更宽的屏幕。
