如何使一个简单的网站在多个移动浏览器上正确呈现?
我们有一个相当简单的站点(最小的JS),带有纯HTML和CSS。这是我们主要应用程序的简单移动界面。
我们遇到了麻烦,因为我们有不止一列,并且多个浏览器似乎强制使用一列。
通过一些搜索,我遇到了2个meta标签。
<meta name="MobileOptimized" content="220" /> <meta name="viewport" content="width=320" />
有了这些,我们对IE Mobile和iPhone有了很好的"缩放"视图。我们的Palm Blazer没有遇到任何问题。但是黑莓是另一回事。
Blackberry是否也有一种简单的方法来控制浏览器的视图?简单来说,我的意思是不为该设备创建特殊页面。
解决方案
我的建议是创建两个或者三个版本的网站:
- 适用于现代台式机浏览器的完整网站(如果它是一个非常繁重的应用程序)
- JS和CSS最少的网站,适用于出色的移动浏览器和桌面浏览器(想到了iPhone和SkyFire)
- 该网站没有JS,只有一栏,而且大多只是纯文本。
原因是为3-4个台式机浏览器编码非常困难。不要为了编写代码而创建另一个简单的页面来发布信息,而要杀死另外一百个设备。
记住Web开发的基本设计原则:用户不在乎。他们需要信息或者功能。如果我们为不良的移动浏览器(IE或者Blackberry)配置了简单明了的布局,那么对我们来说看起来会好得多,然后尝试破解某些东西,这些东西最终会成为可维护性的噩梦,如果有人使用其他移动设备,则可能使我们看起来很糟糕。浏览器,并且我们尚未编写特定于手机的网站。
我不会为iPhone等产品制作"中型"版本,iPhone用户只需足够容易地查看真实网页即可。拥有完整版本和单列版本,我们将以最少的工作即可吸引最多的受众。
但是,要回答问题,除了让1列视图之外,没有其他方法可以使Blackberry进行其他任何操作。我们可以使它看起来相当专业,因为CSS和简单的javascript仍然适用,但是我们将不得不损失很多横向空间。
BlackBerry(OS 4.6和更高版本)支持meta-viewport标签以及meta-HandheldFriendly标签。有关详细信息,请参阅http://na.blackberry.com/eng/support/docs/subcategories/?userType=21&category=BlackBerry+Browser的"内容设计指南"文档。