智能手机现在配备了一些非常高效的Web浏览器。 JavaScript比以往任何时候都更强大，并且可以借助jQuery之类的代码库进行扩展。 当您添加最新的HTML5 / CSS3规范时，就可以使用一些基本的前端代码来构建非常灵活的移动Web应用程序。

 

　　在本教程中，我将展示如何构建基于移动的 网站/ webapp 。 我们将使用CSS3媒体查询来定位特定的设备和屏幕分辨率。 再加上一点jQuery，可以使用Ajax调用来动画化菜单并加载外部页面内容。 更好的是，布局甚至可以扩展以在常规桌面浏览器（例如Chrome或Firefox）中正确显示。

 

　　首先让我们浏览HTML页面，然后使用一些CSS规则设置其样式。 我将跳过标头中的大多数非常规meta标记，因为它们不会直接影响Web应用程序。 但是，我需要提及一些内容，即下面的代码段：

 

　　X-UA兼容用于描述文档应如何在某些浏览器中呈现。 在HTML5中进行编码时，这是一个有趣的场景，因此我不必为此担心太多。 但是，meta 视口标签非常重要。 它将移动浏览器窗口设置为100％，而不是标准的缩放效果。

 

　　还可以使用内容值禁用用户缩放。 但是在这种情况下，我们只想将全屏宽度设置为与设备的宽度相同。 Apple Web应用程序标签将使网站可以作为主屏幕图标保存到iPhone或iPod Touch。 并非完全必要，但当然值得拥有。

 

　　体内含量

 

　　在body标签内部，我设置了ID为的包装器div。 在内部，我使用ID 和将布局分为两个div。 您可以选择将整个页面宽度限制为640像素，以便将布局缩放到一个严格的数字。

 

　　导航菜单的z-index值较低，因此始终位于顶部。 这很关键，因为JavaScript代码将在页面主体上滑动一定数量的像素以显示下面的导航。

 

　　我在每个。html页面前都使用了井号（＃），以阻止Mobile Safari中的某些不良行为。 每当您单击链接时，URL栏就会出现并下推内容。 但是，当引用一个ID时，除了通过JavaScript调用外，什么都不会重新加载。

 

　　CSS代码中没有太多令人困惑的内容。 大多数定位是手动完成的，然后通过jQuery进行操作。 但是我们的文档中有一些有趣的部分。

 

　　此顶部段定义了页面两个部分的样式。 我们的导航菜单只有300px宽，因此为页面内容留出了一些余地。 打开/关闭菜单按钮也直接位于左侧，并且始终可以访问。 这里重要的是z-index属性值和使用 在我们的导航菜单上。

 

　　工具栏顶部的标题也是一个有趣的部分。 它将设置为固定位置，因此它将随页面内容滚动。 复制的效果与任何iOS应用标题栏中的相似。

 

　　移动规则

 

　　很容易注意到，我还在蓝色标题栏纹理上使用背景图像。 尺寸为640×44像素，以保持一致的布局结构。 但是我还为iPhone / iPad视网膜显示器开发了@ 2x图像。 您可以看到下面的两个图像，也可以从我的演示源代码中获取它们。