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

【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

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

相关文章
基于thinkphp5.0和支付宝面对面扫码支付DEMO制作的扫码支付
基于thinkphp5.0和支付宝面对面扫码支付DEMO制作的扫码支付
190 0
手机网站|学习笔记
快速学习手机网站。
23 0
支付宝-电脑网站支付
电脑网站支付,也称扫码支付,是专门针对PC端业务而开发的一种支付方式,既有支付宝提供在网页展示一个动态生成的支付二维码,用户通过手机支付宝扫码以后可实现支付功能的一种支付方式。
243 0
微信小程序怎么开店,微信小程序店铺怎么制作?
微信小程序怎么开店,微信小程序店铺怎么制作?
80 0
支付宝支付改版了,你知道吗?
支付宝支付改版了,你知道吗?
105 0
了解一下微信小程序支付
了解一下微信小程序支付
52 0
Uniapp+UviewUI实现购物商城
Uniapp+UviewUI实现购物商城
500 0
如何在微信中使用支付宝手机网站支付
目前微信已经拦截了所有在微信内调用支付宝支付的途径,故无法直接唤起支付宝。 但您可以借助点击右上角的通过浏览器打开的方式,来试着打开支付宝。  更多详见“快速接入”部分的微信公众平台无法使用支付宝收付款的解决方案。
442 0
支付宝手机网站接口开发指南
  1.接口说明   产品介绍     手机网站接口适用于商户在移动端网页应用中集成支付宝支付功能。     商家在网页中调用支付宝提供的网页支付接口调起支付宝客户端内的支付模块,商家网页会跳转到支付宝中用户完成支付,支付完后跳回到商家网页内,最后展示支付结果。
931 0
如何签约入驻(电脑网站支付接口)
注册入驻   1.使用支付宝账号入驻开放平台 注册支付宝账号并完成实名认证,如已有支付宝账号请选择下一步入驻流程     如何注册认证支付宝账号【点击查看】     马上注册请点击【现在注册】   2.
801 0
+关注
贾志刚
2004毕业于山东大学齐鲁软件学院,软件工程专业。主要专注于图像处理算法学习与研究,计算机视觉技术开发应用,深度学习在计算机视觉领域应用。两本书籍《Java数字图像处理-编程技巧与应用实践》、《OpenCV On Android编程实践》作者
文章
问答
视频
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载
相关实验场景
更多