你可能已经看到了iPhone如何翻页和展开网页。 它可以一目了然地显示整个网页，或放大以使您感兴趣的文本可读。 从某种意义上说，由于iPhone使用Safari，因此网页设计师不必做任何特殊的事情即可创建可在iPhone上使用的网页。
但是，你真的想让你的页面正常工作吗？ 大多数设计师希望他们的页面闪耀！
当你建立一个网页时 ，你需要考虑谁会查看它，以及他们将如何查看它。 某些最佳网站会考虑正在浏览网页的设备类型，包括分辨率，颜色选项和可用功能。 他们不仅仅依靠设备来解决问题。
为移动设备构建网站的一般准则
- 在尽可能多的设备上进行测试。 你应该做的第一件事是在iPhone上以及尽可能多的移动设备或模拟器上查看你的网站。 虽然您可以在所有测试中使用仿真器，但它们确实不会给您带来与尝试在小屏幕上浏览网站相同的感觉，因此尽可能在实际设备上进行测试。
- 让你的页面优雅地退化。 您可以为支持Flash的宽屏幕浏览器编写页面，但要确保即使在无法处理任何特殊功能（如Cookie，Ajax，Flash，JavaScript等）的小型监视器中也能看到关键信息。 超越XHTML Basic的任何东西都将超越一些手机。 虽然大多数智能手机可以处理所有这些事情（当然除了iPhone上的Flash），但其他移动设备无法处理这些事情。
- 建立一个无线特定页面，并使其易于查找。 如果你打算为你的手机和无线客户建立一个特定的页面 - 使它可用。 一种好的方法是将无线页面的链接放在文档的顶部，然后使用手持媒体类型将该链接隐藏在非手持设备上。 毕竟，大多数人甚至在手机上都会访问您的主页 - 如果您的无线页面的链接不存在，那么如果页面太难使用，他们将离开。
智能手机的网页布局
在为智能手机市场编写页面时，您应该记住的第一件事是，如果您不想做任何更改，则不必做任何更改。 大多数智能手机可用的好处是，他们使用Webkit浏览器（iOS上的Safari和Android上的Chrome）来显示网页，所以如果您的网页在Safari或Chrome中看起来不错，在大多数智能手机上它看起来都不错（只是更小一些）。 但有些事情可以使浏览体验更加愉快：
- 请记住，屏幕很小。 智能手机会将所有这些列压缩到微小的窗口中，这可能会使他们很难阅读而不进行缩放。 大多数用户习惯于缩放，但可能会让人感到厌烦。 一列长文本更易于阅读。
- 将页面分成更小的块。 阅读手机上的长段文字可能很困难，因此将它们放在多个页面上可以使它们更易于阅读。
iPhone上的链接和导航
- 网址越短越好。 如果你曾经尝试在手机上输入网址，你会知道这很痛苦（除了那些习惯发送大量短信的青少年）。 即使在iPhone上，输入长URL也很繁琐。 保持简短。
- 但长链接文本更容易点击。 当一个页面上有几个单独的词链接到不同的文章时，所有这些文字都紧挨着一个，因此可能很难在没有缩放的情况下点击正确的文章。 很多人会放弃并去别的地方。 链接3-5个单词比单字链接更容易点击手机。
- 不要将导航放在屏幕的最上方。 没有什么比讨论页面和链接屏幕寻找你想要的信息更烦人的了。 如果您已经查看了专为手机设计的网页，您会发现首先出现的内容是标题和内容。 然后，在下面是导航。
- 不要害怕隐藏你的导航。 隐藏CSS或JavaScript的导航链接，并使其仅在用户要求时才显示，这是让智能手机用户更轻松地使用页面的一种方式。
智能手机上的图像提示
- 图像必须很小。 是的，Android和iPhone可以放大和缩小图像 ，但尺寸和下载时间越短，无线客户就越开心。 优化图像总是一个好主意，但对于手机页面来说，这是至关重要的。
- 图像必须快速下载。 当您从移动设备查看图像时，图像在网页上占用大量空间。 虽然它们通常非常漂亮，并且在全屏浏览器中查看时页面看起来更好，但它们通常会妨碍移动设备。 另外，当智能手机用户使用蜂窝网络时，他们想要支付的最后一件事是下载一大堆图像或导航图标。
- 不要在页面顶部放置大图片。 就像导航一样，等待一个需要3-4个屏幕的图像加载到页面的顶部可能非常繁琐。 这在网页上非常普遍。 唯一的例外是，如果读者知道他们点击时会得到一张图片，在照片库中说。
设计移动设备时要避免什么
在构建适合移动设备的页面时，您应该避免几件事情。 如上所述，如果您确实希望在网页上显示这些内容，您可以，但确保该网站在没有它们的情况下运行。
- Flash - 大多数手机不支持Flash，因此将其包含在无线网页中并不是一个好主意。
- 饼干 - 许多手机没有Cookie支持。 iPhone支持cookie。
- 帧 - 即使浏览器支持它们，也要考虑屏幕的尺寸。 框架在移动设备上不起作用 - 它们很难或不可能读取。
- 表格 - 不要在移动页面上使用表格进行布局。 并尽量避免一般的表格。 每个手机都不支持它们（尽管iPhone和其他智能手机支持它们），最终会出现奇怪的结果。
- 嵌套表格 - 如果您必须使用表格，请务必不要将它嵌套在另一个表格中。 桌面浏览器很难支持这些功能，并且充其量也会让页面加载速度更慢。
- 绝对尺寸 - 换句话说，不是以绝对尺寸（像素，毫米或英寸）来定义对象的尺寸。 如果将某些东西定义为100px宽，则在一个可能是屏幕一半的移动设备上，另一个可能是宽度的两倍。 相对大小（如EMS和百分比）效果最好。
- 字体 - 不要认为你习惯使用的任何字体都可以在手机上使用。
阅读更多
- 如何使您的网站移动友好使用PHP