iOS设备的网页设计

Question

我已经学到了一些开发iOS应用程序的基础知识，并好奇地想了解更多。我最近遇到了网站在移动设备上显示的方式，并愿意知道是否有特定的设计模式/方法支持它。我试着在手机上打开walmart.com，它给出了和屏幕上一样的网站显示，但如果我打开homedepot.com，我在手机上得到的视图是优化的。

这是怎么回事？如何为不同设备(如台式机屏幕、ipad或iphone)提供相同/优化的显示？

Answer 1

有几种方法：

• 使用browser agent information并为该客户端提供自定义文件(html、css、js等)(通常，不是recommended)
• use browser agent or screen-width来重定向到特定于移动设备的站点(许多站点都会这样做；相对容易)
• do responsive design，它本质上使用屏幕宽度和css来自定义站点的显示，这对于响应桌面浏览器的窗口大小也有很好的副作用。但是这种方法比移动网站需要更多的工作。

上面的任何方法通常都需要一些特定于移动设备的东西，比如meta tags

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

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

对于响应式设计，您可以使用像320-and-up这样的css框架来提供帮助。这也是一个很好的参考，看看如何做各种移动的东西。

对于特定于移动设备的站点，像jquery-mobile这样的东西可以提供很多帮助。

Answer 2

您可以检测加载页面的浏览器类型，并重定向到针对移动设备优化的URL。您可能应该让移动用户可以访问针对移动设备优化的和完整版本的站点(请参阅: www.progressive.com)。

谷歌类似于"iphone优化网站教程“来学习如何。