济南网站建设_济南网站制作_济南网站建设公司
济南网站建设,济南高新技术企业、不满意不收费、独立客户管理后台、五年专注网站建设、百人专业技术团队、千家网站成功经验、万元营销礼包赠送。
咨询热线:15966060780

建设移动网站css样式表的注意事项

时间:2015-12-06 来源:未知
 
为网站创建移动功能支持的第一步是建立一个专门适用于移动终端设备css的样式表。在建设移动网站样式表的过程中,网页编程人员要注意哪些方面的问题,下面济南网站建设为您讲解下建设移动网站css样式表的注意事项
1、移动务器端方法及UA字符串
   其中的方法之一就是把涉及检测用户代理字符串的移动样式表用像PHP这样的服务器端语言来进行编写。有了这项技术,网站将能检测出移动终端设备并提供合适的样式表,或者将用户重新定向到另一个移动网络的子域。
   这种服务器端方法有以下几个优点:一是能够最大限度地保证网站的兼容性,二是它能允许浏览网站的移动终端用户查看一些权限较高的内容。
   虽然这项技术能够完美应用于企业级的专业网站,但是其存在的一些实际问题使它很难在大多数普通网站上加以运用。
   因为几乎每时每刻都在产生新的用户代理字符串,所以想保存当前的UA字符串列表是不可能的。
   此外,这种方法依赖于设备本身接替其真实用户代理的能力,所以在互联网发展过程中很多浏览器都通过骗取用户代理的UA字符串来解决这种类型的检测。例如,在20世纪90年代,大多数UA字符串都以“Mozilla-开头从而通过网景公司的检查,而近几年来,Opera浏览器又假装成IE浏览器,十分混乱。就像彼得手机网站建设专家所写的一样:“这简直就是一个军备竞赛,如果设备检测真的流行起来,那么浏览器开发者就会开始骗取他们用户的代理字符串来尽快结束这个检测。”
2. 客户端方法及媒体查询
   或者使用另外一种更简单的方法,那就是直接从客户端上对移动终端设备进行检测。
   最早的检测所包含的移动样式表的方法还包括利用样式表的媒体类型来检测,例如:
<link rel="Stylesheets" href="site.css" media="screen"/>
<link rel="Stylesheets" href="mobile.css" media="handheld"/>
  在这里我们提到了两个样式表,第一个是site.css,主要用于台式电脑和笔记本电脑所使用的屏幕媒体类型,而第二个moblle.css则主要用于手持的移动终端设备。
   虽然这的确是一个很不错的解决办法,但是设备支持与否又是另外一个问题。老一批的移动终端设备基本都支持手持媒体类型,同时它们在实施过程中也伴随着很多变化:有些手机禁用屏幕样式表,并且只加载手持媒体类型,而
其他的两项都允许。
   另外,如今大多数新推出的移动终端已经和手持数码设备没有明显的区分了,这样以便于网站开发者摈弃毫无生气的移动Web布局,从而为用户提供功能更加全面的网页浏览体验。
   为了支持新设备,我们需要用到能够支持我们确定设备大小的媒体查询。自从移动终端设备使用了典型的小屏幕,我们就能通过检测设备屏幕宽度是否小于等于480像素来确定其是不是手持数码设备:
   <link rel="Stylesheets" href="site.css" media="only screen and (max-device width:480px)"/>
   由于之前较老的一些手机不支持媒体查询功能,所以这种方法只是用于新推出的部分手机,所以我们需要一个两全其美的解决方法来挖掘这个绝大的潜在市场。
    首先,定义两个样式表:常规浏览器下无限制的screen.css,用antiscreen CSS覆盖所有你不想在移动终端设备上显示的格式。将这两个样式表组合成一个新的样式表core.css,
    最后,用移动浏览器新增的格式来定义—个新的样式表handheld.css,再将其链接到页面上。
    虽然这项技术占有移动终端市场很大的市场份额,但这并不意味着它就是完美的。像IPad这样像素宽度超过480的移动终端设备,这种方法是行不通的。
    换一个角度看,这些体积更大的移动设备也不需要简明的页面布局。随着技术的不断发展,将会有越来越多的移动终端设备不再适用于这种检测模式。可惜的是,由于目前所谓的 "标准”都是刚形成的,并未成为固定不变的条目,所以在未来想要推动更新移动设备的检测方法也是很有难度的。
    除了设备检测有不理想的地方,媒体查询这种方法同样也存在一些问题。主要问题是,媒体查询只对具有差异性的网页内容样式有用,而且它不能控制网页文本的发送。
   例如,用媒体查询的方以隐藏一个侧栏的内容,但是这并不能有效防止用户下载标记。出于对移动互联网宽带速度的考虑,新添加的HTML不能被人们忽视。
上一篇:排版和网格在网站建设中的重要性
下一篇:网页设计师该如何选择网站建设的布局?

在线客服

售前咨询
点击这里给我发消息
点击这里给我发消息
点击这里给我发消息
技术支持
点击这里给我发消息
点击这里给我发消息
售后服务
点击这里给我发消息
点击这里给我发消息