42、移动Web应用开发全攻略

移动Web应用开发全攻略

1. 服务移动内容

在为移动设备提供Web内容时，需要了解移动浏览器与桌面浏览器对内容的不同解析方式。当在桌面浏览器和移动浏览器中查看一个带有标题和文本的基本网页时，会发现移动浏览器会像对待普通网页一样对其进行缩放。例如，在Safari浏览器中，页面会被缩放到980像素宽，然而大多数移动设备的物理像素较少，这会导致页面上的标题和文本显得非常小，甚至难以看清。

为了解决这个问题，可以在标记中嵌入更多信息，让移动浏览器知道它正在接收为移动设备设计的内容。例如，为了解决缩放问题，可以在页面头部添加一个额外的meta标签：

<meta name="viewport" content="width=device-width, initial-scale=1"/>

这个标签告诉移动浏览器将页面的默认宽度设置为设备的实际宽度（可能小于980像素），并且不缩放内容。也可以将 minimum-scale 和 maximum-scale 都设置为1，以避免移动浏览器进行缩放，但这可能会降低用户体验。

iOS/Safari中可用的特殊meta标签如下表所示：
| Meta标签键（name=”…”） | Meta标签值（content=”…”） | 描述 |
| — | — | — |
| apple-mobile-web-app-capable | yes/no | 如果为yes，则以全屏模式运行应用程序 |
| apply-mobile-web-ap