响应式网站怎么做百度移动开放适配?

Web前端 码拜 7年前 (2015-11-18) 2456次浏览 0个评论

响应式网站现有的3种移动开放适配方案:

  • 跳转适配:该方法会利用单独的网址向每种设备提供不同的代码。这种配置会尝试检测用户所使用的设备或ua,然后使用 HTTP 重定向和 Vary HTTP标头重定向到相应的页面。
  • 代码适配:该方法使用相同的网址(不考虑用户所使用的设备),但会根据服务器对用户所用浏览器的了解(ua),针对不同设备类型生成不同版本的HTML
  • 自适应:通过同一网址提供相同 HTML 代码的网站设计方法。该方法不考虑用户所使用的设备(pc、平板电脑、移动设备),但可以根据屏幕尺寸以不同方式呈现(即适应)显示屏。

以上三种适配网站是否相同的区别:

PC、移动网址是否一致 PC、移动网页代码是否一致
跳转适配
代码适配
自适应

三种方案需要做的配置:

一、跳转适配

JS跳转方案并不被百度推荐,原因如下:

如果使用跳转适配的方式,请不要使用JS对ua进行适配跳转。这种方式存在两个缺点:

  • 对用户:会加大由重定向的客户端造成的延迟;这是因为客户端需要先下载网页,接着解析并执行 JavaScript,然后才能触发重定向。301或302则不会有这个延迟。
  • 对搜索:爬虫也需要使用支持JS渲染的爬虫,才能发现此重定向。

可以通过Nginx来实现,参考规则如下:

#其他规则…
location / {
    #如果是移动端访问, 将跳到移动站点:
    if ($http_user_agent ~* “iphone|ipod|ipad|ipad|Android|nokia|blackberry|webos|webos|webmate|bada|lg|ucweb|skyfire|sony|ericsson|mot|samsung|sgh|lg|philips|panasonic|alcatel|lenovo|cldc|midp|wap|mobile”) {
        rewrite (.*) http://codebye.com$1 permanent;
           }
#其他规则…
这样,当移动端访问我们的网站时,将会自动跳转到我们的m移动站。前提是:有一个移动站,并且在PC和移动站的head部分做好META标注:

pc版网页上,添加指向对应移动版网址的特殊链接 rel=”alternate” 标记。这有助于发现网站的移动版网页所在的位置。
  在移动版网页上,添加指向对应pc版网址的链接 rel=”canonical” 标记。

例如,假设pc版网址为http://example.com/1.html,且对应的移动版网址为http://m.example.com/1.html,那么此示例中的注释如下所示:

pc版网页(http://www.example.com/1.html) 上,添加:

XHTML
1
<link rel=”alternate” media=”only screen and(max-width: 640px)” href=”http://m.example.com/1.html” >

而在移动版网页(http://m.example.com/1.html) 上,所需的注释应为:

XHTML
1
<link rel=”canonical” href=”http://www.example.com/1.html” >

Ps:这个canonical标签的主要目的就是申明当前页面的唯一地址,避免重复内容带来的影响。

最后到百度提交开放适配 sitemap 文件

二、代码适配

代码适配是指移动站和PC站共用一个域名,但是针对不同的终端访问,会展示不同的内容(主要表现在移动端页面的自适应特性)。

采用代码适配方案,根据官方文档,我们需要做2个设置:

①、添加Vary HTTP标头

②、做好META声明

第①个设置:大致应该是分别在移动和PC站的header响应头部中加入不同Vary信息(此header不是网页的<head>部分,而是F12开发界面-network选项卡中看到的头部信息)。

第②个设置:比较简单。分别在移动或PC站页面的<head>部分输出不同META申明:

PC站:<meta name=”applicable-device” content=”pc”>

移动站:<meta name=”applicable-device” content=”mobile”>

Ps:这个适配不是很推荐,因为页面一开启缓存,立马歇菜!

三、自适应

自适应网站布局能够根据浏览器或设备的宽度来自适应调整,在各种宽度下都能完美展示网页的主要内容,一般用到@media

自适应网站在开放适配上的困扰,有以下2点:

  • 移动端搜索可能被转码了
  • 响应式/自适应网站到底如何做移动开放适配。

①、转码问题

在被转码的页面底部,会有百度给出的解决方案,感兴趣的自己去手机上看看。

要避免百度转码,只需在页面head中加入如下META申明即可:

XHTML
1
2
<meta http-equiv=”Cache-Control” content=”no-transform” />
<meta http-equiv=”Cache-Control” content=”no-siteapp” />

②、适配问题

自适应网站,可以做好如下设置:

I. MEAT标注

自适应设计有其一般原则:在head添加以下代码并且使用<picture>元素处理自适应图片:

XHTML
1
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

自适应页面还应该在head中标识:

XHTML
1
<metaname=”applicable-device”content=”pc,mobile”>

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

II. 提交Sitemap(可选)

响应式sitemap其实就是开放适配的一个变相形式,即申明移动站和PC站是同一个url(这个步骤可做可不做)。


CodeBye 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明响应式网站怎么做百度移动开放适配?
喜欢 (0)
[1034331897@qq.com]
分享 (0)

文章评论已关闭!