阿迪SEM博客 > 移动SEO > 如何做一个百度友好的自适应网站
2015年12月25日

如何做一个百度友好的自适应网站

  自适应站点是目前很多站长都喜欢做的网站的一种,自适应也叫响应式,可以根据屏幕的宽度自动识别,然后对网页做出相应的调整。百度也公开宣称,鼓励广大站长朋友,使用HTML5技术,打造一个在电脑端和移动端都有良好用户体验的网站。那么如何做一个百度友好的自适应网站呢?下面郑州SEO-阿迪SEM博客为大家分享一些经验。


  一、什么样的网站适合做自适应

  自适应网页设计是可以根据终端设备屏幕的大小做出识别,然后做出相应的调整的一种网页设计方法,完美的解决了在不同大小的终端设备呈现给用户同样的网页效果。

  自适应网站有四个优点:

  1、提升了用户体验;

  2、PC端和移动端SEO保持了一致性;

  3、PC端和移动端链接统一;

  4、避免了重复内容和错误内容的。

  但是自适应网站还有一个缺陷:那就是开发成本较高,因为一般的自适应网站都是用HTML5+CSS3制作的,目前来讲是一个新的技术,开发成本会高一些。尤其是要构建包含额外编程的复杂的自适应网站,所需的时间可能会长一些。

  针对已经做好的网站来讲,想实现全站的自适应设计,可能就需要丢弃原来网站的所有代码,全部重新制作,无论是在时间方面还是技术方面成本都是比较大的。而且如果一个网站有多个portal(入口),会大大增加架构设计的复杂度,所以很多网站现在只在移动端实现响应式设计。同时针对此类型的站点建议使用跳转适配的方式来实现网站的移动化(推荐阅读阿迪SEM博客《移动网站跳转适配成功生效的要点》的相关介绍)。

  二、自适应网站在代码方面需要怎么调整

  1、首先我们需要阻止移动浏览器自主调整页面的大小

  iOS和Android浏览器都基于webkit核心,这两种浏览器以及其他的很多浏览器都支持viewport meta元素覆盖默认的画布缩放设置,因此我们需要在HTML的标签中插入一个标签,设置具体的宽度或者是缩放比例2.0(设备实际尺寸的两倍),如以下代码就是讲一个网页放大到设备实际尺寸的两倍显示。

<meta name=”viewport” content=”initial-scale=2.0,width=device-width”/>

  2、将网页修改为百分比布局

  当某个浏览窗口处于媒体查询固定的范围之外,网页就需要水平滚动才能完整浏览,而通过百分比布局可以页面元素根据窗口大小在一个又一个媒体查询之间灵活修正样式,具体来讲,就是css代码不会指定具体像素宽度:width:xxx px;而是会指定一个百分比宽度:width:xx%;或者直接就是width:auto;这里大家可以根据一个简易的公式将固定像素宽度转换成对应的百分比宽度:目标元素宽度 ÷ 上下文元素宽度 = 百分比宽度

  例如:

<div id =”wraper”>
  <divid = “header”></div>
         </div>
         #wrapper {
           margin-right: auto;
           margin-left: auto;
           width: 960px;
         }
         #header {
           margin-right: 10px;
           margin-left:10px;
           width: 940px;
         }

  转换为百分比的header区块的css为:

#header {
  margin-right: 10px;
  margin-left: 10px;
  width: 97.916667% /* 940 ÷ 960 */
}

  3、用em替换px

  同样,目标元素宽度 ÷ 上下文元素宽度 = 百分比宽度这个公式也适用于将文字的像素单位转换为相对单位,值得注意的是,现代浏览器的默认文字都是16像素,因此一开始给body标签应用下列任何一条规则所产生的效果都一样:

font-size: 100%;
font-size:16px;
font-size: 1em;

  例如某网站网站标题相应的样式:

#logo {
   display: block;
   padding-top: 75px;
   color: #0d0c0c;
   font-family: Arial;
   font-size: 48px;
}

  修改后的样式如下:

#logo{
   display: block;
   padding-top: 75px;
   color: #0d0c0c;
   font-family:Arial;
   font-size:3em /* 48 ÷ 16 */
}

  4、流动布局(fluid grid)的使用

  “流动布局”指的是各个区块的位置都浮动,不是固定不变的。

.main {float: right;width: 70%;}
.leftBar {float: left;width: 25%;}

  这么做的好处是,如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向溢出,避免了水平滚动条的出现,大大提升了用户的阅读体验。另外,绝对定位(position:absolute)的使用,也要非常小心。

  5、Media Query技术的使用

  在自适应设计的技术中,css3支持css2.1定义的媒体类型,同时添加了很多涉及媒体类型的功能属性,包括max-width(最大宽度),device-width(设备宽度,orientation(屏幕定向:横屏或竖屏),因此可以通过Media Query加载相应的CSS文件. 例如,下面代码定义了如果页面通过屏幕呈现,并且屏幕宽度不超过480px,则加载shetland.css

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="shetland.css" />

  同样可以创建多个样式表,以适应不同设备或者不同分辨率的宽度范围,当然更有效的做法是将多个Media Query整合在一个样式表文件中:

@media only screen and (min-devece-width: 320px) and (max-device-width: 480px) {
   /* Styles */
} 
  @media screen and (min-width: 600px) {
.hereIsMyClass {
  width: 30%;
  float: right;
}

  上面的代码中定义的样式类只有在浏览器屏幕宽度超过600px时才会有效。

  因此,使用min-width和max-width可以同时判断屏幕尺寸与浏览器实际宽度,如果希望通过Media Query作用于某种特定设备,但忽略在其上运行的浏览器是否由于没有最大化尺寸与设备屏幕尺寸不一致,则可以使用max-device-width和max-device-width属性来判断设备本身屏幕尺寸。

  Media Query不是唯一的解决方案,同样可以通过Javascript来实现自适应设计,特别是某些旧浏览器无法完美支持CSS3的Media Query时,它可以作为备选方案。当然,我们仍然能借助专业的Javascript库来帮助旧浏览器(IE5+,Firefox 1+,Safari 2等)支持CSS3的Media Queries.使用方法:下载css3-mediaqueries.js,然后在页面中调用它即可,例如:

<!--[if lt IE 9]>
   <script src=http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js></script>
 <![endif]-->

  6、 设计响应式图片

  有很多同比缩放图片的技术,其中有不少是简单易行的,比较流行的方法是使用CSS的max-width属性:

img { max-width: 100%;}

  老版本的IE不支持max-width,所以只好写成:

  img { width: 100%; }此外,windows平台缩放图片时,可能出现图像失真现象。这时,可以尝试使用IE的专有命令:

img { -ms-interpolation-mode: bicubic; }

  或者,Ethan Marcotte的imgSizer.js。

addLoadEvent(function() {
      
var imgs =
      
ocument.getElementById("content").getElementsByTagName("img");
      
imgSizer.collate(imgs);
      
});

  如果有条件的话,最好能根据屏幕的不同大小,加载不同分辨率的图片。

  三、 自适应站点对百度友好的关键

  1,applicable-device标注应该怎么写

  有了自适应设计的网页,还要照顾到对百度友好的设计,即告诉百度“我是自适应页面”方便百度进行识别校验。方法也很简单,只要在上面viewport标签下面再添加一个applicable-device标签就行:

<meta name="applicable-device" content="pc,mobile">

  表示页面同时适合在移动设备和PC上进行浏览。

  2, 在使用百度站长平台链接提交工具的sitemp进行提交时,要做mobile type标记,具体取值:

<mobile:mobile type="pc,mobile"/>

  其他网页取值如下:

  <mobile:mobile/> :移动网页

  <mobile:mobile type="mobile"/> :移动网页

  <mobile:mobile type="htmladapt"/>:代码适配

  无该上述标签表示为PC网页(推荐阅读阿迪SEM博客《移动适配常见问题:了解这些 你也能算半个移动专家》的相关介绍)


    此文为(阿迪SEO)原创内容,特此声明!

本文《如何做一个百度友好的自适应网站》由郑州SEO-阿迪SEM博客原创发布,如需转载请注明出处:http://www.adiseo.com/ydseo/45.html,谢谢合作!

TAG标签:自适应网站(2)移动适配(3)

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)