65.9K
CodeProject 正在变化。 阅读更多。
Home

关于移动网站的一切

mahesh@indianic.com
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.92/5 (25投票s)

2008 年 11 月 1 日

CPOL

7分钟阅读

viewsIcon

124181

本文解释了移动网站的所有方面。

引言

如今，越来越多的人开始开发专门为移动设备设计的网站。

这样做的原因很简单。网站所有者可以接触到总是有特定搜索需求的专属用户群。手机随身携带，人们总是保持连接，现在我们甚至不会忘记带它们，就像我们不会忘记带钱包一样！

移动网页与标准网页略有不同。移动网页内容和图片会更小。一个理想的移动网页应该在任何移动设备上在2秒内渲染完成。所以我们应该始终将网页大小限制在较小的范围内。

关键点

网站应该在几乎所有支持GPRS的手机、PDA以及所有1G、2G和3G移动设备上显示。这是一个真正的挑战，因为你无法找到适用于所有设备的通用解决方案。我曾大量搜索通用解决方案，但令我失望的是，我找不到一个适用于所有设备的。正是这个事实促使我写下了这篇文章。

将普通网页转换为移动网页需要进行哪些更改？

对于移动浏览器来说，有两点很重要。你应该同时设置它们。

  1. DOCTYPE

    DOXTYPE（文档类型声明）指示验证器你的网页正在使用哪个版本的（X）HTML。你必须将其写在网页的第一行。它有助于验证你的标记和CSS。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. 内容类型

    移动网页的内容类型可以是以下任意一种

    1. application/vnd.wap.xhtml+xml
    2. application/xhtml+xml

    哪种是正确的，取决于移动设备。有些设备支持a，有些支持b，很多设备两者都支持。最好的方法是编写一个函数，检查请求头，然后相应地设置内容类型。我已经在下面展示了这个函数

    /// <summary>
/// Function to set the content type dynamically.
/// You need to call this function on each mobile web page.
/// </summary>

public void setContentTypeDynamically(HttpRequest Request, HttpResponse Response)
{
   if(Request.Headers["Accept"].ToString().IndexOf
			("application/vnd.wap.xhtml+xml") != -1)
       Response.ContentType = "application/vnd.wap.xhtml+xml";
   else if (Request.Headers["Accept"].ToString().IndexOf
				("application/xhtml+xml") != -1)
       Response.ContentType = "application/xhtml+xml";
   else
       Response.ContentType = "text/html";
}

    这个函数很容易理解。它读取服务器变量Request.Headers["Accept"]的值，并相应地设置响应对象的ContentType。这里检查ContentType的顺序很重要，因为许多现代移动浏览器可能支持所有这些类型！

图片很特别。根据移动设备的屏幕尺寸渲染它们。

移动设备的通用宽度曾经是255像素。但这已经发生了巨大变化，因为手机制造商正在生产N种具有各种屏幕尺寸的型号。你可以从X-Wap-Profile XML文件中查看移动设备的屏幕尺寸。我将在下面的另一点中讨论X-Wap-Profile。

图像显示的最佳方法是——在数据库中存储一张255像素的图像，然后根据请求的屏幕宽度和高度在IIS上调整其大小。

例如：摩托罗拉L7的屏幕尺寸为176 x 200（宽 x 高），黑莓8800的屏幕尺寸为320 x 240，诺基亚2630的屏幕尺寸为128 x 160。为了图像的完美显示，必须在IIS上相应地调整其大小，然后将正确的URL指向图像标签。

为了简化这个过程，我在数据库中创建了一个表。它在第一次请求时读取“X-Wap-Profile”，并将手机型号名称、X-Wap-Profile的URL、屏幕宽度、屏幕高度、是否支持3gp、mp4等信息存储在数据库表中。

我不会在每次请求网页时都去读取“X-Wap-Profile”。相反，我只在新手机首次请求时才这样做。在第一次请求时，所有设备信息都存储在数据库表中，对于所有后续请求，我可以直接在数据库中查找屏幕的高度和宽度。这将减少每次请求“X-Wap-Profile”的工作量，并能更快地向客户端提供网页。

注意：从数据库读取图像和调整图像大小的代码超出了本文的范围。请在The Code Project中搜索相关内容！

一个域名，两个不同的网站

有时，你可能只注册了一个域名，但希望有两个不同的网站指向同一个域名。

让我们通过一个例子来理解这一点。你有一个像http://www.yourwebsitename.com这样的域名。你将开发两个不同的网站：网站“A”完全专用于普通桌面浏览器，网站“B”则包含大小较小且专门为移动浏览器设计的移动网页。

现在，如果从桌面浏览器请求http://www.yourwebsitename.com，你希望显示你的普通网站“A”的主页；如果请求来自任何支持GPRS的移动设备，你将希望向它们显示你的移动网页网站“B”的主页。

为什么你的两个网站想要使用相同的域名？

答案很简单

  1. 你可以在两个页面上都获得SEO的好处。
  2. 两个网站都可以获得相同的品牌价值和客户信任。
  3. 营销和广告可以在两个网站之间共享。
  4. 你也可以拥有域名http://www.yourwebsitename.mobi，但如果从移动设备请求，显示移动主页而不是普通网页会更有意义。

检测移动浏览器的代码

以下代码解决了上述问题。我创建了一个函数，用于检查“X-Wap-Profile”。如果找到，则将其重定向到我的移动网页，否则将请求重定向到普通网页。

// Declare a boolean variable for mobile browser
bool IsMobi = false;

// If request header can find the X-Wap-Profile, then it is a mobile browser
        if (Request.Headers["X-Wap-Profile"] != null)
        {
            if (Request.Headers["X-Wap-Profile"].ToString().Length > 0)
            {
                IsMobi = true;
                Response.Redirect("index.aspx", true);
            }
            Else
            {
                Response.Redirect("web/index.aspx", true);
            }
        }

Request.Headers是什么？

HTTP请求头允许客户端向服务器提供关于自身的信息。它们提供了关于请求性质的额外细节，如其内容类型、Accept-Charset、Accept-Encoding、Accept-Language等。

“X-Wap-Profile”是什么？

当你请求移动浏览器时，它会向服务器发送更多信息。其中之一就是“X-Wap-Profile”的链接。

  • X-Wap-Profile: http://gsm.lge.com/html/gsm/LG-KG220.xml

X-Wap-Profile是一个XML文件，它提供了关于移动设备的所有详细信息。你可以找到移动设备的屏幕尺寸、支持的音频和视频类型、设备的型号名称以及更多信息。

这个XML文件由手机制造商提供，供外部世界使用。

这段代码适用于所有支持GPRS的移动设备吗？

答案是否定的。但这个技巧并不比上面难多少。有些移动设备没有X-Wap-Profile属性。相反，它们可能有以下任何一种：

  • X-Wap-Profile
  • X-Wap-Profile
  • 配置文件
  • 配置文件

此外，根据我的经验，一些三星和LG设备也以不同的书写风格显示相同的属性，如下所示：

  • X-Wap-Profile
  • x-wap-profile
  • X-WAP-PROFILE

最好的方法是在一个函数中检查所有这些，并根据IsMobi布尔变量的值，将用户重定向到相关的网页。

一些提示和技巧

  1. 将移动页面放在父文件夹中，将普通网页放在子文件夹中。

    这将避免在请求来自任何移动设备时进行任何重定向。它可以节省宝贵的CPU周期。它还将帮助你更快地向用户提供响应。任何用户都不能等待页面渲染超过两秒钟。理想的移动页面应该在任何移动设备上在2秒内渲染完成。

  2. iPhone是一种特殊设备，我希望我的网站在iPhone上像普通桌面网页一样呈现。我该怎么做？

    在这种情况下，你将从用户代理中检查名称“iphone”或“ipod”。如果找到，你将需要在metatag中设置Viewport属性。在下面的例子中，我必须在页面标题部分中像这样使用一个名为“iphone”的字面量。

    <head id="Head1" runat="server">
        <asp:literal id="iphone" runat="server"></asp:literal>
</head>

    在代码隐藏中，我按如下方式检查它：

    // If requesting User Agent is an IPhone or IPod than set the iphone label
if (Request.UserAgent.ToLower().Contains("iphone"))
{
     // Set the Viewport attribute.
     iphone.Text = "<meta name=\"viewport\" content=\"width = 
			device-width height = device-height \" />";
}
else if (Request.UserAgent.ToLower().Contains("ipod"))
{
     // Set the Viewport attribute.
     iphone.Text = "<meta name=\"viewport\" content=\"width = 
			device-width height = device-height \" />";
}

结论

根据我的经验，我已经在200多种移动设备上测试了上述代码，它运行良好。

我没有包含演示项目，因为上面显示的代码非常简单易懂且易于应用。如果您对理解此概念有任何疑问，请随时与我联系。

历史

  • 2008年11月1日：首次发布
© . All rights reserved.