【gloomyfish】关于手机网站你想知道的一切

本文涉及的产品
.cn 域名,1个 12个月
简介: 关于手机网站你想知道的一切 -          all you want to know about a mobile website 介绍(introduction) 如今越来越多的人打算开发自己的网站尤其是基于移动设备的,这么做的原因很简单。

关于手机网站你想知道的一切

-          all you want to know about a mobile website

介绍(introduction

如今越来越多的人打算开发自己的网站尤其是基于移动设备的,这么做的原因很简单。

网站的拥有者希望拥有更多的有明确搜寻的访问者。手机是手持的,人们只要不忘记

他们的钱包,他们也不可能忘记带上手机。

 

Mobile Web pages (MWP)相比标准的网页稍有不同,支持移动访问网页的内容更少图片更小

一个理想的MWP应该在2秒之内被任何一种移动设备加载完,因此我们应该总是限制MWP

更小。

 

关键点(Key Point

网站可以显示在绝大多书的GPRS的移动设备上,PDAs, 1G,2G3G移动设备(mobile

devices)。一个真正的挑战是你不可能找出一种解决方案支持所有的移动设备,我已经

Google很多的解决方案,但是让我失望是没有一个可以支持所有设备。这个是导致我写这篇文章的一个因素。

 

哪些改变是必须的要把一个Normal网页转换成一个Mobile网页

对一个Mobile浏览器来说有两件非常重要的事情,你必须设定它们:

 

1.         文档类型(DOCTYPE

-          DOCTYPEDocument Type Declaration)指导校验那个版本的HTML是你网页正在使用的,你必须在你网页的第一行写入,它帮助验证你网页的标记符号与CSS

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

2.         内容类型(Content Type

       Mobile网页的内容类型可以为下面任意之一:

a.       application/vnd.wap.xhtml+xml

b.       application/xhtml+xml

那个是正确的取决于移动设备本身,有些移动设备只支持a,有些移动设备只支持b,更多的移动设备两者都可以支持,最好的方法是开发一个功能来检查请求头信息从而

设定正确的内容类型,我已经展示我开发的功能如下:

1.            /// <summary>

2.            /// Function to set the content type dynamically.

3.            /// You need to call this function on each mobile web page.

4.            /// </summary>

5.             

6.            public void setContentTypeDynamically(HttpRequest Request, HttpResponse Response)

7.            {

8.               if(Request.Headers["Accept"].ToString().IndexOf

9.                                      ("application/vnd.wap.xhtml+xml") != -1)

10.               Response.ContentType = "application/vnd.wap.xhtml+xml";

11.           else if (Request.Headers["Accept"].ToString().IndexOf

12.                                           ("application/xhtml+xml") != -1)

13.               Response.ContentType = "application/xhtml+xml";

14.           else

15.               Response.ContentType = "text/html";

16.        }

功能相当地容易理解,它读取服务端变量Request. Headers ["Accept"],根据它设定ContentType值在Response对象中。检查ContentType值的顺序是非常重要的,许多流行的移动浏览器支持以上全面类型。

 

图像是很特殊的,提供图片要根据移动设备屏幕大小显示

移动设备的通常宽度是255个像素,但是手机设备制造商产生多种模式有不同的屏幕大小,你可以检查X-Wap-Profile XML file得到移动设备的屏幕大小,我已经讨论了X-Wap-Profile在下面。

 

显示图片最好的办法是存储一个255像素的图片在数据库中,根据请求的屏幕高和宽来调整图片的显示大小。

 

举个例子,Motorola L7屏幕大小是176 x 200(宽 x 高),黑莓8800320 x 240,诺基亚2630128 x 160,为了完美的显示图片,必须在服务器上先调整大小,然后图像Tag指向正确的URL

 

为了处理容易,我在数据库中创建了一张表,它读取第一请求中的X-Wap-Profile中的手机模式名称,X-Wap-ProfileURL,屏幕宽度,高度,支持3gpMP4等保存在数据库中。

 

我没有每次读取X-Wap-Profileweb页面Request来到,我只在一个新的手机请求第一次来到时候这么做。在第一次Request时所有的设备信息被存储在数据库表中,在所有随后的请求中,我能直接查找屏幕大小信息在我的数据库中,这将减少每次请求X-Wap-Profile的开销,更快的服务一个web page为客户端

 

同一个域名,两个不同的网站(Single Domain, Two Different Web Sites

有时候,你只有一个注册域名,但是你有两个不同网站指向同样的域名。让我们用一个例子来理解这点

 

你有一个域名比如http://www.yourwebsitename.com你将开发两个不同的网站:网站A专注支持于桌面浏览器,网站B是移动页面意味着更小的size设计支持移动浏览器

 

现在如果http://www.yourwebsitename.com被请求从桌面浏览器,你可能显示正常网站A的主页,如果请求来任何GPRS相关的设备,你就显示给它们移动网站B的主页。

 

为什么你两个网站用同样的域名(Why You Want the Same Domain Name for Both of the Websites?

答案很简单:

1.       你将受益于来自两个网站的SEO

2.       两个网站接受同样的品牌价值和客户信任

3.       市场和广告可以在两个网站间共享

4.       你也可以拥有域名http://www.yourwebsitename.mobi但是更合理的是显示给一个用户移动主页而不是正常主页如果一个请求来自一个移动设备。

 

代码检测移动浏览器(Code to Detect a Mobile Browser

下面的代码解决上面的问题,我已经创建一个功能来检查Request中的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);

            }

}

 

什么是请求头(What are Request. Headers?

HTTP请求头允许客户端提供自己的信息给服务器,它给出额外信息关于请求种类像类容类型(Content Type),接受字符集(Accept-Charset), 接受编码(Accept-Encoding, 接受语言(Accept-Language)等.

 

什么是X-Wap-Profile

当你请求一个移动浏览器,它发送更多的信息返回给服务器,其中之一是连接X-Wap-ProfileX-Wap-Profile: http://gsm.lge.com/html/gsm/LG-KG220.xml

 

X-Wap-Profile是一个XML文件提供移动设备所有的详细信息,你可以发现移动设备屏幕的大小,支持的音频和视频类型,设备模式名称,其它更多的事情。

 

手机设备制造商提供这个XML文件目的是在外面使用它。

 

代码只是用在所有GPRS支持的移动设备上嘛

答案是NO,窍门并没有上面的困难,有些移动设备没有X-Wap-Profile属性相反的他们可能有下面之一:

ü         X-Wap-Profile

ü         X-Wap-Profile:

ü         Profile

ü         Profile:

而且基于我的经验某些三星和LG的移动设备用不同写法对于同样的属性,它们是下面之一:

ü         X-Wap-Profile

ü         x-wap-profile

ü         X-WAP-PROFILE

最好的方法是在一个方法里面检查所有情况,然后根据值来重定位到相关正确的网页。

 

一些提示和窍门(Some Tips and Tricks

1.       把移动网页放在父目录,正常网页放在子目录

       如果请求来自移动设备这将避免重定向,它将节省你的CPU轮询,也帮助你给出一个          快的响应对用户(Request),没有用户能等上两秒为呈现页面,一个理想的移动网页在     任何移动设备上呈现应该在两秒之内。

2.       iPhone是个特殊的设备,我想我的网站提供一个正常的桌面网页在iPhone上,为此我该做些什么呢?

       在这种情况下,你会检查User Agent中值是否为iPhone或者iPod。如果发现,你需要           Metatag中设置ViewPort属性,下面的例子中,我不得不在page hearder中写下iPhone     字样:

1.            <head id="Head1" runat="server">

2.                    <asp:literal id="iphone" runat="server"></asp:literal>

3.            </head>

在后台的代码中,我的检查代码显示如下:

1.            // If requesting User Agent is an IPhone or IPod than set the iphone label

2.            if (Request.UserAgent.ToLower().Contains("iphone"))

3.            {

4.                 // Set the Viewport attribute.

5.                 iphone.Text = "<meta name=/"viewport/" content=/"width =

6.                                      device-width height = device-height /" />";

7.            }

8.            else if (Request.UserAgent.ToLower().Contains("ipod"))

9.            {

10.             // Set the Viewport attribute.

11.             iphone.Text = "<meta name=/"viewport/" content=/"width =

12.                                  device-width height = device-height /" />";

13.        }

 

总结Conclusion

个人经验,我已经在200种移动设备上测试过上述代码,它工作良好。

我没有包含一个Dome的项目是因为上述的代码非常简单容易理解和应用,如果你在理解这些代码和概念有任何问题,请随时联系我

 

作者的E-Mail: mahesh@indianic.com

原文地址 - http://www.codeproject.com/KB/mobile/All-about-a-mobile-websit.aspx

目录
相关文章
|
2月前
|
编解码 搜索推荐
如何搭建一个手机网站?
随着移动端广泛使用,网站展示已经不限于PC端,更重要是移动端(手机端)的展示。我们做公司宣传,有需要拥有一个适配手机屏幕的网站变得至关重要,那么制作一个手机网站有什么步骤呢?
|
数据采集 安全 搜索推荐
深圳网站建设多少钱?
答案是:深圳网站建设是3000元! 网站建设的价值 网站是当今企业和个人展示形象、推广产品和提供服务的重要平台。 在深圳,一个国际化的大都市,拥有一个专业的网站变得尤为重要。 决定网站建设费用的因素 在深圳建设一个网站的费用并非固定,而是受多种因素影响。
284 0
深圳网站建设多少钱?
|
数据采集 安全 搜索推荐
如何做外贸网站建设?
答案是:做谷歌SEO可推广自己的外贸网站,外贸官网可选用Wordpress或shopfiy程序。 了解目标市场 在开始外贸网站建设前,首先要对你的目标市场有一个清晰的了解。 市场调研 首先,进行市场调研以了解目标市场的需求和趋势。 你需要知道你的潜在客户是谁,他们的购买习惯是什么,以及他们的需求是什么。
202 0
如何做外贸网站建设?
|
数据采集 搜索推荐 UED
广州外贸网站建设怎么做?
答案是:做谷歌SEO可以用Wordpress或者Shopify来建站。 理解外贸网站的目标 明确市场定位 首先,我们需要明确哪些国家和地区是目标客户。 广州作为中国的重要贸易中心,与多个国家都有业务往来,但每个市场的消费习惯、文化和需求都有所不同。 设定产品展示策略 外贸网站应重点展示哪些产品?是否需要为不同市场定制不同版本的产品描述和图片?这些都是在建设之前需要考虑的问题。
116 0
广州外贸网站建设怎么做?
|
数据采集 安全 搜索推荐
如何做好外贸网站建设?
答案是:做谷歌SEO可推广自己的外贸网站,外贸官网可选用Wordpress或shopfiy程序。 设计视觉效果 选择简洁的设计 优化的设计不仅能提高用户体验,还可以使用户更容易找到他们想要的信息。 使用高质量的图片 选择与你的产品或服务相关的高质量图片,可以增加网站的吸引力。 保持色彩一致性 选择一个和品牌相匹配的色彩方案,使外贸网站看起来更专业。
139 0
如何做好外贸网站建设?
免费好用的OA系统有哪些?
面对免费OA系统琳琅满目,企业如何选择一款适合企业的免费OA系统呢?
199 0
|
安全 前端开发 Unix
网站建设常用的cms建站系统推荐
国内网站建设市场参差不齐,建站公司多如牛毛,网站价格便宜的几百,贵的几十万,作为外行,很难去选择,国内大部分网站建设公司都是营销公司,完全没有底层技术框架的开发能力,90%以上的网站建设公司都是基于各种cms网站内容管理系统来制作网站,七牛云小编根据最近服务器各种cms的安装量,统计国内用户比较多的几个cms,并分别介绍,希望对从事网站建设的朋友能起到参考作用
349 0
网站建设常用的cms建站系统推荐
|
自然语言处理 搜索推荐 SEO
外贸网站建设有什么特点?英文外贸网站有什么优势
英文外贸网站建设不仅体现企业的综合实力,还可以通过搜索引擎为企业带来更多潜在的客户资源,为企业创造收益,很多外贸企业都建设有外贸网站,外贸网站还有哪些特点和优势呢?接下来小编为你详细分享,一起来看看吧。
143 0
外贸网站建设有什么特点?英文外贸网站有什么优势
免费OA系统哪个好用
免费OA系统可以实现企业内部信息的共享和沟通,提高工作效率和管理水平。它可以将企业的公文、文件、邮件、通知、任务等信息进行自动化处理,有效地缩短了企业内部流程和信息传递的时间,提高了企业的效率和竞争力。
154 0
|
弹性计算 云计算 数据可视化
阿里云心选商城——网站建设篇之——云·企业官网定制
使用阿里云建站可以有三种,第一种是购买ECS云服务器;第二种方式是购买阿里云官网云速成美站;第三种是使用阿里云官方定制建站。