移动设备网站设计

Question

我刚刚使用样式表（即@media print等）为网站添加了打印功能，想知道是否可以使用类似的方法来支持移动设备。

如果不行，我该如何检测移动设备？我的页面是C# (.aspx)，我想为移动设备简化页面。

你有什么建议吗？

编辑：我妻子有一部黑莓手机，所以我至少希望为我们公司的网站启用黑莓手机支持。

- BoltBait

Answer 1

我不确定iPhone/iPod Touch在请求样式表时如何声明自己的身份，但对于大多数设备来说，使用以下代码即可：

<style type="text/css">
    @media handheld
    {
      /* handheld styles */
    }
</style>

这应该能解决问题。它的工作方式与@media print相同（或不同）。

有关媒体类型的完整列表，请参见此处。

- Rob Allen

---

你也可以在HTML的<link>标签中指定媒体属性。 <link rel="stylesheet" type="text/css" href="xxx.css" media="screen" /> - gnud

Answer 2

移动浏览器在支持的内容、是否遵循样式中的“媒体”属性等方面存在许多混乱。

我建议采用渐进增强（这是一系列文章之一），并确保如果浏览器只能理解纯HTML，您的内容仍然可见且顺序正确 - 例如，您希望主要内容出现在侧边栏之前的代码中，因为主要内容更重要。

上文提到了一个不错的资源。

- Nathan Long

Answer 3

您可能想使用类似 WURFL 这样的东西，它是一个相当好的数据库，了解很多关于设备和它们的用户代理的信息，如果其他解决方案不起作用的话。

另外，请记得减少下载大小 :)

- alex

Answer 4

您需要查看您的用户代理类型，并查看它是否为移动设备。以下代码是一个示例：

public static bool IsMobile(string userAgent)
{
    userAgent = userAgent.ToLower();

    return userAgent.Contains("iphone") |
         userAgent.Contains("ppc") |
         userAgent.Contains("windows ce") |
         userAgent.Contains("blackberry") |
         userAgent.Contains("opera mini") |
         userAgent.Contains("mobile") |
         userAgent.Contains("palm") |
         userAgent.Contains("portable");
}

在大多数情况下，这应该是可行的！此链接可能会帮助您更加具体化。

- Mat Nadrofsky

Answer 5

看看这个！它非常酷！http://mobstac.com/developer/

MobStac API平台是构建和管理移动站点的最快方式！您可以访问开发人员文档和API密钥。

- Namratha

Answer 6

做所有这些的最佳方式是在服务器级别完成。

使用Web服务检查访问者是否为移动设备，并根据此提供输出。在应用程序上使用相同的URL并执行相同的业务逻辑 - 只需更改应用程序的视图层。

一个很好的选择是Wapple Architect（http://wapple.net）- 它允许您通过一些Web服务在服务器级别进行这些检查，然后根据移动设备执行逻辑和添加代码。

绝对值得一看。

- rgubby