代码适配对百度友爱代码详解

标签:代码,配对,百度,友爱,详解 时间:2019年09月18日 阅读64次

一、什么样的网站适合做代码适配?

代码适配的特点是网站在移动化的过程中,使用了雷同的网址作为移动适配的方法,根据服务器对用户设备欣赏器user agent参数的获取,针对不同设备类型加载不同的访问界面。也就是代码适配成功之后,统一套网站url,在不同设备上打开的情况下可以是完全不同的页面结构和样式(包括html和css)。

代码适配的好处:和自适应站点一样,网页版和移动版使用了统一套url规则,保持了网页版的原有链接,seo策略可以保持同等,也避免了站内重复内容的产生;相对于自适应网站设计前端性能会很高,由于是统一套代码应对所有的设备表现,必要加载针对相应式所必要的css,javascript,但是代码适配的话可以简化为只包含为响应设备优化的内容,以实现较少的前端性能损耗。

代码适配的瑕玷:后期代码维护很麻烦,要针对不同设备或不同分辨率屏幕设计响应的模板文件,内容的部分虽然可以使用内容管理体系在所有模板上主动同步更新内容四川人事考试中心,但是根据网站的复杂程度非标自动化,代码适配所需的开发时间很有可能较长。

综上所述,网站结构简单,网页模板不是许多的站点比较适合做代码适配,比如企业站,小我博客等。另外要细致的是,由于必要服务器端脚原本辅助实现,所以您的网站必须在自力服务器或VPS云主机上,假造主机用户就不要进行代码适配您的网站了。

二、如何实当代码适配?

 1.服务器端的预备工作

为什么要修改Vary HTTP头?其实代码适配应用的是HTTP的内容协商机制,即服务器为统一个URL的请求提供了多份不同的文档作为相应,服务端和客户端之间会根据事先设定好的协商机制来选择适合的版本。最常见的就是服务端根据客户端发送的请求头中包含某些字段主动发送最合适的版本。Vary的作用就在于告诉代理服务器、缓存或者CDN,如何判断请求是否一样,vary中的组合就是代理服务器、缓存或者CDN判断的依据,比如Vary中有 User-Agent(User-Agent:告诉HTTP服务器,客户端使用的操作体系和欣赏器的名称和版本。例 如: User-Agent: Mozilla/4.0 (compatible; MSIE8.0; Windows NT 5.1; Trident/4.0; CIBA; .NET CLR 2.0.50727; .NET CLR3.0.4506.2152; .NET CLR 3.5.30729; .NET4.0C; InfoPath.2; .NET4.0E)),那么User-Agent是否转变就是判断的依据,即使统一个页面请求,用户使用IE打开,再用Firefox打开的时候,会被代理服务器/CDN/缓存认为是不同的请求,假如Vary中没有User-Agent,那么代理服务器/CDN/缓存会认为是雷同的页面,直接给用户返回缓存的页面,而不会再去web服务器请求响应的页面。总之服务器开启了Vary:User-Agent之后,客户端的任何请求信息中会包含UA的信息。同时官方说明它有助于百度spdier 更快速地发现针对移动设备进行优化的内容,并且进步其他ua抓取此网页的优先级。

2.如何修改服务器http头

首先查看本身网站的http相应头的方法有许多,Linux服务器端可以直接使用这个shell饬令:curl –head http://www.esmo.cn/xxxx3564/ ;Chrome 欣赏器自带的抓包工具也可以查看;或者直接使用站长平台的抓取诊断工具就可以,下面就是查询一个服务器相应的http头的效果:

这个例子里目前的http头信息中,Vary项如今是Accept-Encoding;而我们要修改的也就是这一项。详细修改http头的方法根据不同的web服务器用不同的设置方法:

1)     假如web服务器是apache的话,第一步要确保服务器是否安装了mod_headers模块。假如是第一次编译安装apache,确保./configure--prefix=/usr/local/apache2 --enable-rewrite --enable-so --enable-headers--enable-expires --with-mpm=worker --enable-modules=most --enable-deflate等,后面有--enable-headers;假如apache已经安装编译好了,httpd -M 指令可以列出编译过的模块,同时能看到哪些模块是static静态编译,哪一些是shared动态加载的。要往已经编译安装好的apache添加mod_headers模块,要在httpd的源文件里面找到mod_headers.c ,运行程序编译出mod_headers.so ,然后在httpd.conf添加进来,参考步骤如下:

#cd /root/src/httpd-2.2.26/modules/mappers

#/usr/local/apache/bin/apxs-c mod_headers.c

#gcc-shared -o mod_headers.so mod_headers.o -lgdbm

#/usr/local/apache/bin/apxs-i -A -n mod_headers mod_headers.so

/usr/local/apache/bin/是正在使用的apahce的目录

第二步,在httpd.conf 中添加headers_module模块:

找到# LoadModule,在它的下一行插入:

LoadModule headers_module  modules/mod_headers.so

保存更新建网站多少钱,然后在要修改的目标站点的配置文件中,添加下面语句:

<IfModulemod_headers.c>

        <FilesMatch".(js|css|xml|gz|html)$">

          Header append Vary: User-Agent

        </FilesMatch>

</IfModule>

保存之后,然后重启apache就可以生效了。不必要对服务器进行重新编译。

2)假如web服务器是nginx的话,第一步要确定安装了ngx_headers_more模块,nginx源码没有包含该模块,必要另行添加。安装方法:

wget ‘http://nginx3453/download/nginx-1.5.8.tar.gz’

tar –xzvf nginx-1.5.8.tar.gz

cd nginx-1.5.8/

#here we assume you would install you nginx under/opt/nginx/.

./configure –prefix=/opt/nginx \--add-module=/path/to/headers-more-nginx-module

make

make install

第二步,在配置文件nginx.conf中,添加如下代码:

gzip_vary on;

more_set_headers -s 200 "Vary: ""Accept-Encoding, User-Agent";

然后重启服务器。

3)  假如是IIS

在web.config里加上如下配置,web.config位置在:%windir%\Microsoft.NET\Framework\4682版本号\CONFIG\Web.config 。<system.webServer>
 <httpProtocol>
 <customHeaders>
<remove name="Vary"></remove>
<add name="Vary" value="Accept-Encoding"></add>
</customHeaders>
</httpProtocol>
</system.webServer>

最后,同样可以用上面方法再请求一次http头,来判断我们的设置有没有成功。假如返回的头中,有Vary:User-Agent 或者Vary:Accept-Encoding User-Agent 就注解我们设置成功了。

3.完成内容协商

首先设计好针对不同设备的网站模板文件,可以和pc端响应的模板文件放在统一个路径下,命名成不同的文件比如index.pc.htm index.iphone.htm index.andori.htm index.tv.htm等都是网站首页在不同设备下的模板文件等待调用。

在这里简单的仅以通过php代码来实现的体例举例手机网站制作,在url对应的动态文件中(可能是某个入口文件,也可能是通过入口文件include某控制文件),通过如下代码实现动态适配:

$UA = strtoupper($_SERVER['HTTP_USER_AGENT']);

if(preg_match("/(iPhone|iPad|iPod|Android|ucweb|windowsphone|Blackberry)/i", $UA)) {

  /* 加载响应的模板文件 */

}

这段代码含义是,首先通过$UA =strtoupper($_SERVER['HTTP_USER_AGENT'])来获取用户 访问的欣赏器设备信息,通过匹配得到加载出不同设备体系,欣赏器下适配好的不同模板文件(以上匹配的UA只限iphone,ipad,ipod,android,uc移动欣赏器,windows phone,黑莓手机等设备),假如大家想了解更多的httpuser-agent关键字,可自行去网上查找。

4.添加metaapplicable-device标签

Vary标头添加好后,服务器端就能根据请求头中的UA信息,判断客户端是PC照旧移动设备甚至是什么移动设备的请求了,有了这个服务器就能根据设定给出响应的相应文件,从而达到统一套url,不一样的设备表现不一样的页面样式。为了让百度更好地识别我们的页面是 PC 照旧 Mobile,就必要使用百度自定义的这个 Meta applicable-device 标签。这个标签可以帮助百度校验本身的判断,并及时进行修正。这部分是在网站的模板里添加的。假如是PC端的模板文件,则在<head></head> 之间添加<metaname="applicable-device"content="pc">;假如是移动端的模板文件,则在<head></head> 之间添加<metaname="applicable-device"content=" mobile ">;如许即使通过服务器的设置BaiduSpider判断错误了,这个标签的设置也能起到修正的作用。

5.Firefox插件

之前站长学院文章<代码适配移动站点对百度友爱案例分享>中提到过Google 欣赏器来模仿UA结果的插件,在此我再介绍一款火狐欣赏器的UA模仿插件,它可以帮助各位站长轻松的”伪装”成其他平台/品牌的欣赏器,来测试本身网站的适配效果

首先通过https://addons.mozilla3453/en-US/firefox/addon/user-agent-switcher/ 下载并安装此插件,

完成后,点击工具栏上的按钮,打开UserAgent Switcher的菜单

选择“EditUser Agent”或“UserAgent Switcher”=>"Options",打开如下的设置页面。

点击右下角的“Downloadlists of user agents to import...”链接,在打开的网页中找到下图中标注的位置,我们可以找到最常用的UA列表了,这里直接给出列表的下载地址,方便大家下载。

下载完成后,回到设置页面,点击左下方的“Import...”按钮,将刚才下载的useragentswitcher.xml 导入到扩展中即可 ,之后我们就可以在欣赏器上通过切换访问刚刚适配好的页面啦,之后增补一点我们仍然可以在现有的UA基础上“新建”(New)以及“修改”(Edit),来知足我们的要求。

结果如下:

 

 

 

网站搜索引擎排名
全国服务热线:4000-340-360 企业QQ:4000340360
公司地址:北京市密云县河南寨镇密顺路18号产业基地办公楼420室-958
CopyRight◎2015-2025 版权所有:百信百度排名公司 备案号:京ICP备15033961号