移动网站设计答案

【问题标题】：Web Site Designing for Mobile移动网站设计
【发布时间】：2008-11-07 19:18:43
【问题描述】：

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

如果没有，我如何检测移动设备？我的页面是 C# (.aspx)，我想缩小页面以便在移动设备上使用。

对我有什么建议吗？

编辑：我妻子有一部黑莓，所以至少我想启用我们公司的网站。

【问题讨论】：

标签： c# css mobile

【解决方案1】：

我不确定 iPhone/iPod Touch 在请求样式表时如何声明自己，但对于大多数人来说，使用

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

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

有关媒体类型的完整列表，请参阅here.

【讨论】：

您还可以在 html 标签中指定 media 属性。

【解决方案2】：

移动浏览器在支持什么方面是一个真正的大杂烩，无论它们是否遵循您的样式的“媒体”属性等等。

我会说瞄准progressive enhancement（这是一系列文章之一），并确保如果浏览器只理解纯 HTML，您的内容仍然可以查看且顺序正确 - 例如，您希望您的主内容出现在代码侧边栏之前，因为主要内容更重要。

上面的文章中提到了decent looking resource。

【讨论】：

【解决方案3】：

如果其他解决方案不起作用，您可能想要使用类似WURFL 的东西，这是一个相当不错的数据库，它对设备及其用户代理了解很多。

请记住减少下载大小:)

【讨论】：

【解决方案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");
}

这在大多数情况下应该有效！这个link 也可以帮助您更具体。

【讨论】：

【解决方案5】：

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

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

Wapple Architect (http://wapple.net) 是一个不错的选择 - 它允许您在服务器级别使用一些 Web 服务进行这些检查，然后执行逻辑并添加代码（如果它是移动设备）。

绝对值得一看。

【讨论】：

【解决方案6】：

看看这个！它太酷了！ http://mobstac.com/developer/

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

【讨论】：