开发者社区> 贾志刚> 正文

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

简介: 关于手机网站你想知道的一切 -          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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
27734 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
15295 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
19982 0
腾讯云服务器 设置ngxin + fastdfs +tomcat 开机自启动
在tomcat中新建一个可以启动的 .sh 脚本文件 /usr/local/tomcat7/bin/ export JAVA_HOME=/usr/local/java/jdk7 export PATH=$JAVA_HOME/bin/:$PATH export CLASSPATH=.
14860 0
阿里云服务器ECS远程登录用户名密码查询方法
阿里云服务器ECS远程连接登录输入用户名和密码,阿里云没有默认密码,如果购买时没设置需要先重置实例密码,Windows用户名是administrator,Linux账号是root,阿小云来详细说下阿里云服务器远程登录连接用户名和密码查询方法
22227 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
23526 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,云吞铺子总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系统盘、创建快照、配置安全组等操作如何登录ECS云服务器控制台? 1、先登录到阿里云ECS服务器控制台 2、点击顶部的“控制台” 3、通过左侧栏,切换到“云服务器ECS”即可,如下图所示 通过ECS控制台的远程连接来登录到云服务器 阿里云ECS云服务器自带远程连接功能,使用该功能可以登录到云服务器,简单且方便,如下图:点击“远程连接”,第一次连接会自动生成6位数字密码,输入密码即可登录到云服务器上。
36349 0
+关注
贾志刚
2004毕业于山东大学齐鲁软件学院,软件工程专业。主要专注于图像处理算法学习与研究,计算机视觉技术开发应用,深度学习在计算机视觉领域应用。两本书籍《Java数字图像处理-编程技巧与应用实践》、《OpenCV On Android编程实践》作者
252
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载