关于移动网站开发你需要知道的知识【译】

最新推荐文章于 2024-05-16 09:49:07 发布

areswry

最新推荐文章于 2024-05-16 09:49:07 发布

阅读量2.4k

点赞数

文章标签： iphone 浏览器 mobile xml 数据库手机

本文链接：https://blog.csdn.net/areswry/article/details/3864604

版权

关于移动网站开发你需要知道的知识【译】

申明

本文翻译自codeproject，代码版权归原文所有。转载请注明出处。

引言

当下很多人准备开发专为移动设备访问的网站。

这样做的原因很简单。网站所有者能使那些有特殊搜索需求的人们成为忠实的受众。

移动电话是便携的，人们总是一直在线，而且现在我们不会忘记随身携带它甚至就像不会忘记随身携带钱包一样。

手机网页和标准网页稍微有些不同。手机网页会有更少的容量和更小的画面。一个空闲的手机网页应该能在两秒钟内呈现在任意一台手机上，所以我们要一直限制页面的大小。

关键点

这些网站应该支持大多数GPRS的手机、PDA以及1G，2G和3G的移动设备。这确实是一个挑战，因为你很难找到一个适合所以设备的通用解决方案。我曾尝试在google上搜索一个通用解决方案，但令我失望的是，我没有找到一个通用的方案。这正是促使我写这篇文章的原因。

把一个普通的网页转变为一个移动网页需要进行哪些改变呢？

有两件事情对移动浏览器是重要的。你应该对这两点都进行设置。

1 :- 文档类型（DOCTYPE）：

文档类型（文档类型申明）告诉验证器你的网页是使用的哪一个版本的(X)HTML。你应该把它写在页面的第一行。这有助于验证你的标签和样式（CSS）。

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

2 :- 内容类型（Content Type）

一个移动页面的内容类型可以是下面的任何一种。

a) application/vnd.wap.xhtml+xml
b) application/xhtml+xml

a和b哪个是正确的选择取决于移动设备。有些设备支持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"]并且相应的设置response对象的ContentTyp。这里的 ContentType 判断顺序是重要的，大多数的移动浏览器对两者都支持！

图片是特别设计的，使它们根据移动设备的屏幕尺寸来呈现。

一般移动设备的宽度为255像素。但这一点已经戏剧性的改变了，移动设备制造商正在生产N种屏幕尺寸不一的设备。可以根据XML 文件 X-Wap-Profile 来检测屏幕尺寸。

最好的显示图片的方式是：在数据库中存储单张大小为255像素的图片，在ISS上根据请求的屏幕尺寸调整长和宽。

比如：摩托罗拉 L7的屏幕尺寸为 176 x 200（宽 x 高），黑莓8800为320 x 240，诺基亚2630为128 x 160。为了达到图片的最佳显示，在IIS上必须相应的调整图片尺寸并在图片img标签上指向准确的URL。

为了简化这个处理过程我在数据库中创建了一张表。在首次请求时读取“X-Wap-Profile”并在该表中存储设备型号名称，X-Wap-Profile文件的URL ，屏幕宽度，屏幕高度，3gp及mp4的支持情况等信息。

我不会在页面的每次访问请求读取'X-Wap-Profile' 。相反我只是在某新设备首次访问时这么做。在首次访问时，所有的设备信息都将被存储在这张数据库表中，在所有后续访问请求中我可以直接在我的数据库中查找屏幕的高度和宽度。这将减轻每次请求“X-Wap-Profile”的负担，进而更快的将网页返回给客户端。

注：从数据库读取图片以及修改图片尺寸的代码超出了本文的覆盖范围。请在 codeproject.com上搜索！

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

有时候，你也许只注册了一个单一域名，而你又想有两个不同得网站同时指向这个域名。

让我们用一个例子来解释一下。你有一个域名，如 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, than 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 请求的头信息允许客户端向服务器提供自身相关的信息。它给出了请求的一下额外信息，比如：内容类型（content type）、可接受的字符集（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:

Profile

Profile:

我曾经在三星和LG的设备上看到这个属性名的不同的大小写形式：

X-Wap-Profile

x-wap-profile

X-WAP-PROFILE

最后的方式是在同一个函数中检测所有这些可能的属性，并根据布尔变量IsMobi的取值情况将用户导航到相应的页面。

一些技巧

1、将移动网页放入母文件夹，普通网页放入子文件夹。

一旦有移动设备来访问，这将避免任何来自移动设备访问时的重定向。这就节省了你宝贵得CPU周期。它也将帮助你给予用户更迅速得反应。没人会愿意为了显示一个页面而等上超过2秒钟。一个理想页面就应该能在2秒钟内显示于任何移动设备上。

2、Iphone是一种特殊设备，要想让Iphone访问桌面版的网站，怎样才能实现呢？

这时你应该检查用户端的名为‘iphone’ 或 ‘ipod’（的参数）。如果找到了，你就要设置一个名为viewport的meta标签。在下面的例子中我在header区段用一个literal 控件完成该设置。

<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种设备中测试了前叙代码，都运行良好。由于这些代码简单易懂，我没有附一个演示项目。有任何疑问欢迎联系。

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

mahesh@indianic.com

My self is an Asp.net developer having experience of 4+ years in web technologies.

I have worked with Mobile WAP sites since last 10 months. I have made my website available on more than 200 mobile device which customized code for each device.

Occupation:	Software Developer (Senior)
Company:	http://www.indianic.com
Location:	India

areswry

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
2
评论
关于移动网站开发你需要知道的知识【译】

关于移动网站开发你需要知道的知识【译】申明本文翻译自codeproject，代码版权归原文所有。转载请注明出处。引言当下很多人准备开发专为移动设备访问的网站。这样做的原因很简单。网站所有者能使那些有特殊搜索需求的人们成为忠实的受众。移动电话是便携的，人们总是一直在线，而且现在我们不会忘记随身携带它甚至就像不会忘记随身携带钱包一样。手机网页和标准网页稍
复制链接

扫一扫