适用于iOS设备的网页设计

Question

我已经学习了一些关于开发iOS应用程序的基础知识，并希望了解更多信息。我最近遇到过网站在移动设备上显示的方式，并且愿意知道是否有支持它的特定设计模式/方法。我尝试在手机上打开walmart.com，它会在屏幕上显示相同的网站，但如果我打开homedepot.com;我在移动设备上看到的视图是一个优化的视图。

这是如何工作的？如何为不同的设备（例如桌面屏幕，ipad或iphone）获得相同/优化的显示器？

Answer 1

有几种方法：

• 使用browser agent information并为该客户提供自定义文件（html，css，js等）（一般情况下，不推荐）
• 使用browser agent or screen-width重定向到特定于移动设备的网站（很多网站都做了;比较容易）
• 做responsive design，它主要使用screen-widths和css来自定义站点的显示。这也有一个很好的副作用，响应桌面浏览器的窗口大小调整。但是这种方法比移动专用网站需要更多的工作。

上述任何一种方法通常都需要一些特定于移动设备的内容，例如meta tags：

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

这告诉移动浏览器将页面宽度设置为屏幕宽度，并防止缩放。

对于响应式设计，您可以使用320-and-up之类的css框架来提供帮助。这也是了解各种移动设备如何完成的好参考。

对于特定于移动设备的网站，jquery-mobile之类的内容可以提供很多帮助。

Answer 2

您可以检测正在加载页面的浏览器类型，并重定向到针对移动设备优化的网址。您应该可以让移动用户访问移动优化版和完整版网站（请参阅：www.progressive.com）。

谷歌就像“iphone优化网站教程”那样学习如何。