优化移动设备的网站

Question

我正在开发专门针对移动浏览器的网站。 我应该遵循哪些指南来优化移动开发的网站？ 我主要担心的是：

1. 大多数移动设备都有适当的浏览器。如何在这些不同的浏览器上测试应用程序（由于安全限制，无法在实际设备上进行测试）？

2. 如何针对不同的屏幕尺寸优化网站？

3. 如何让应用触摸友好？

4. 如何检测设备的方向（在带有加速度计的设备中）？

5. 如何检查设备不是台式机/笔记本电脑？

Answer 1

我在设计移动网站时使用过的东西。

1. 找出您计划支持的设备范围。你可以问的一些问题是
   • 你是否只支持智能手机
   • 您计划支持哪些平台（iPhone，Android，Symbian？）

您可以通过您能够收集的分析类型来回答很多问题。如果您的统计数据非常少，那么您可以按照此策略开始。

1. 将目标设备范围分离为

   • 简单（具有最低浏览功能的基本手机。） - 为他们设计一个非常简单的普通香草网站。
   • medium（支持javascript的浏览器的老一代智能手机） - 设计一个功能略强的网站。
   • Highend智能手机（iPhone，Android，WebOS） - 提供这些手机支持的爵士功能。

2. 使用WURFL / .Mobi等设备检测库进行设备检测，使用WALL进行动态呈现内容。

3. 您可以使用.Mobi检测符合HTML5标准的移动浏览器。这样，您就可以在支持它的设备中利用HTML5功能。

4. 对于测试，您可以遵循此方法

   • 测试浏览器 - Firefox / Safari / Opera有插件可以改变USER_AGENT并可以模拟移动测试。
   • 在模拟器上测试 - 所有设备平台都提供免费下载模拟器
   • 如果需要，请尝试设备模拟产品，例如设备在任何地方/ perfecto。

我希望我能够澄清你们中的一些问题。 ：）

Answer 2

权威指南必须是W3C移动网络最佳实践：http://www.w3.org/TR/mobile-bp/不要让它的长度让你失望 - 我发现它比其他W3C规范更容易阅读。关键部分是最佳实践陈述，分为一口大小的块，通常有一个例子。这里还有最新的广泛的移动网络优化指南：http://dev.opera.com/articles/view/the-mobile-web-optimization-guide/（免责声明：我为Opera工作）

Answer 3

Q1大多数移动设备都有适当的浏览器。如何在这些不同的浏览器上测试应用程序（由于安全限制，无法在实际设备上进行测试）？

答案取决于您要测试和支持的设备数量。

iPhone：设备和模拟器可用。 Android：设备和模拟器可用

其他手机？

检查http://www.deviceanywhere.com

当然，您需要支付服务费。但我认为这是合理的。

Q2如何针对不同的屏幕尺寸优化网站？

的iphone4  WVGA854  WVGA800  VGA  HVGA  QVGA  QCIF +

制作各种尺寸的内容很困难。因此必须选择屏幕尺寸和支持的型号。

Q3如何让应用程序触摸友好？

这是你的设计问题。

Q4如何检测设备的方向（在加速度计附带的设备中）？

Android和iOS有关于此类事件的特殊消息。你必须遵循这样的信息。  当然，您需要横向和纵向布局。

Q5如何检查设备不是台式机/笔记本电脑？

您可以使用User-Agent标头或IP地址。但IP地址不是好方法。