iphone 上的 Safari 默认会像桌面浏览器一样来渲染你的页面，大致是 980 像素的页面宽度。然后，它会按比例缩小页面来适应小屏幕。结果，用户会看到非常小的，难以辩认的字母，你必须放大才能看到你感兴趣的东西。这或许对你的网页没什么问题，但是如果你是专门针对 iphone 来设计，让它像本地程序一样使用，这是无法让人接受的。
幸运的是，有个简单的方法，就是正确使用特殊的 meta 元素的 viewport 属性：
- <meta name="viewport" content="width=device-width" />
这个元素指示浏览器使用设备的宽度来作 viewport （视图）的宽度，还不是使用默认的 980 像素。从下面两个例子我们就可以看到区别。
- 例 3 显示了一个简单的段落元素，这里没有使用 meta 元素的 viewport 属性。字体几乎不可读。
-
例 4 中使用了 meta 元素的 viewport 属性。现在在 iphone 里看到的页面宽度是设备的宽度 320 像素，字体大小更容易看到了。
另外，你也可以设置 device-with 的值为任意值，只要你喜欢。例如，假设你的 blog 的布局是 750 像素固定宽度，因此它非常适合 800×600 的桌面屏幕。 例 5 显示了一个简化版的类似布局；如果你从 iphone 查看，你就会看到空白填充 980 像素的剩下部分。
要消除空白，你就可以使用 meta 元素的 viewport 属性，把它设成 780px：
- <meta name="viewport" content="width=780" />
例 6显示了使用 meta 元素的 viewport 属性带有固定布局的版本。
meta 元素的 viewport 属性的内容也可以包含多个逗号分隔的值，例如 initial-scale – 用户开始浏览你的页面的缩放级别，还有 user-scalable。对一个 web 应用，常用的值集合是：
- <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
这个元素设定了设备的最大宽度（在我们看到以前），缩放到一个缩放级别，然后，限制用户可以缩放或不可以缩放内容。这就是方便的让你的 web 应用看起来像本地程序的方法。
