如何在移动设备上测试网站设计？

Question

我已经设计好了我的网站，使用了900 x 600的固定背景图片。在电脑上看起来很好，但是在PDA设备上会怎么样呢？我需要单独为PDA进行设计吗？

如何检查我的网站是否可以有效地从手机浏览？

我应该做些什么？

- praveenjayapal

Answer 1

• 尝试使用 Opera 的“小屏幕”视图（查看 > 小屏幕）。这种方法可以相当不错地模拟移动屏幕。请在 Opera 的官网上试一下。请注意，他们使用了一个“手持式”类型的样式表，当您在手持设备上或切换到小屏幕模式时会启用该样式表。

• 您可以免费下载谷歌的 Android SDK 进行测试。

• 要在 iPhone 上进行测试，请参见iPhone Tester。在右下角有一个按钮可将 iPhone 旋转为宽屏状态。

• OpenWave Phone Simluator 是一个不错的选择。

• 您可以尝试使用mobi 在线模拟器。

• Windows Mobile 5.0 SDK for Smartphone 包含“基于 Windows Mobile 5.0 的 Smartphone 设备仿真器映像和皮肤文件”

• 最后，一些总体指导：Web Content Accessibility and Mobile Web: Making a Web Site Accessible Both for People with Disabilities and for Mobile Devices（网络内容可访问性和移动网络：使网站对残障人士和移动设备都易访问）

- Charles Roper

Answer 2

不必使用浏览器检测，您可以为手持设备提供替代样式表。使用

<link rel="stylesheet" href="small.css" type="text/css" media="handheld">

优点在于您只需要一个网站版本，差异在于样式表。您需要一个额外的CSS，而使用浏览器检测，则需要不同版本的每个页面。缺点是并非所有浏览器都支持用于样式表的`media`属性。但是，最现代的浏览器支持它，并且对其的支持正在增长。

如果您感兴趣，我建议查看A List Apart article。

顺便说一句，如果您还没有使用CSS，请立即切换到它，无论您选择哪种解决方案来解决您的问题。 CSS非常棒！

- Treb

Answer 3

你也可以获得黑莓设备模拟器。

- MalusMentis

Answer 4

嗯，你可以在其中加入一些检测 JavaScript 来检查浏览器类型，然后重定向到一个针对移动设备格式化的不同网站。这似乎是大多数网站的常规做法。

示例：

• Digg.com
• Twitter.com
• Google.com

- contagious