HTML5移动Web开发指南——6.6.2 viewport设置适应移动设备屏幕大小

viewport设置适应移动设备屏幕大小 1．什么是viewport Apple为了解决移动版Safari的屏幕分辨率大小问题，专门定义了viewport虚拟窗口。它的主要作用是允许开发者创建一个虚拟的窗口（viewport），并自定义其窗口的大小或缩放功能。 如果开发者没有定义这个虚拟窗口，移动版Safari的虚拟窗口默认大小为980像素。现在，除了Safari浏览器外，其他浏览器也支持viewport虚拟窗口。但是，不同的浏览器对viewport窗口的默认大小支持都不一致。默认值分别如下：  Android Browser浏览器的默认值是800像素；  IE浏览器的默认值是974像素；  Opera浏览器的默认值是850像素。 2．如何使用viewport viewport虚拟窗口是在meta元素中定义的，其主要作用是设置Web页面适应移动设备的屏幕大小。 如以下代码： <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0" /> 该代码的主要作用是自定义虚拟窗口，并指定虚拟窗口width宽度为device-width，初始缩放比例大小为1倍，同时不允许用户使用手动缩放功能。 在上面的代码中，我们使用了一个特别的名字：device-width。自iPhone面世以来，其屏幕的分辨率一致维持在320480。由于Apple在加入viewport时，基本上使用width= device-width的表达方式来表示iPhone屏幕的实际分辨率大小的宽度，比如width=320。因此，其他浏览器厂商在实现其viewport的时候，也兼容了device-width这样的特性。 代码中的content属性内共定义三种参数。实际上content属性允许设置6种不同的参数，分别如下：  width指定虚拟窗口的屏幕宽度大小。  height指定虚拟窗口的屏幕高度大小。  initial-scale指定初始缩放比例。  maximum-scale指定允许用户缩放的最大比例。  minimum-scale指定允许用户缩放的最小比例。  user-scalable指定是否允许手动缩放。