如何使一个简单的网站在多个移动浏览器上正确呈现?

时间:2020-03-06 14:28:35  来源:igfitidea点击:

我们有一个相当简单的站点(最小的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的"内容设计指南"文档。