如何在多个移动浏览器上正确渲染简单的网站？

Question

我们有一个相当简单的网站（最小的JS）与简单的HTML和CSS。它是我们主要应用程序的简单移动界面。

我们遇到了麻烦，因为我们有多个列，而且有几个浏览器似乎强制使用单列。

通过一些搜索我遇到了2个元标记。

<meta name="MobileOptimized" content="220" />
<meta name="viewport" content="width=320" />

有了这些，我们对IE Mobile和iPhone有一个很好的“缩放”视图。我们没有遇到掌上Blazer的任何问题。但黑莓是另一回事。

Blackberry是否也有一种简单的方法来控制浏览器的视图？简单来说，我的意思是没有为该设备制作特殊页面。

Answer 1

我的建议是创建两个或三个版本的网站：

• 现代桌面浏览器的完整网站（如果它是一个非常繁重的应用程序）
• 用于良好移动浏览器和桌面浏览器的最小JS和CSS的网站（iPhone和SkyFire浮现在脑海中）
• 网站没有JS，单列，大部分只是纯文本。

原因是3-4个桌面浏览器的编码很难。不要在另外一百个设备上自杀以编写代码并创建一个只提供信息的简单页面。

记住Web开发的基本设计原则：用户不关心。他们想要信息或功能。如果您对糟糕的移动浏览器（IE或Blackberry）有一个简单，清晰的布局，然后尝试破解最终成为可维护性噩梦的东西并且如果有人使用另一个移动设备可能会让您看起来很糟糕浏览器，你尚未编写手机专用网站。

Answer 2

我不打算为iPhone等制作“中等”版本，iPhone用户可以轻松地查看您的真实网页。拥有完整版和单列版，您将以最少的工作量吸引最多的受众。

要回答你的问题，除了1列视图之外，没有什么好方法可以让Blackberry做任何事情。你可以让它看起来相当专业，因为CSS和简单的javascript仍然适用，但你将不得不失去很多你的水平房地产。

Answer 3

BlackBerry（来自OS 4.6及更高版本）同时支持meta-viewport标记以及meta-HandheldFriendly标记。有关详细信息，请参阅http://na.blackberry.com/eng/support/docs/subcategories/?userType=21&category=BlackBerry+Browser上的“内容设计指南”文档。