导读简介描述:代码适配对百度友好代码详解移动端适配的方式有多种形式,比如通过规则适配、响应式、独立移动PC站等方式都可以实现PC移动端适配的效果今天详细讲一下本人比较喜欢的适配方式即代码适配,这种适配方式可以说是尽可能的结合了上面集中适配方式的优点,对于SEO优化来说还是比较友好的什么是代码适配代码适配PC和移动端使用了相同地址,通过服务器后端通过获取用户设备浏览器useragent参数,针对不同的设备加载不同的代码即访问界面
个人/企业网站建设:698元,联系电话:15093778828
更多网站建设 商城系统程序 定制程序开发需求请咨询在线客服!
移动端适配的方式有多种形式,比如通过规则适配、响应式、独立移动PC站等方式都可以实现PC移动端适配的效果。
今天详细讲一下本人比较喜欢的适配方式即代码适配,这种适配方式可以说是尽可能的结合了上面集中适配方式的优点,对于SEO优化来说还是比较友好的。
什么是代码适配代码适配PC和移动端使用了相同地址,通过服务器后端通过获取用户设备浏览器useragent参数,针对不同的设备加载不同的代码即访问界面;
简单的讲就是不同设备上打开的页面可以都不一样,不仅仅是简单的样式不一样,还可以控制html、js、css等代码都不一样,虽然响应式布局也是可以达到类似的效果。
但是如果设备种类多的时候响应式布局的代码冗余会非常的高,十分的影响性能,并且扩展性能是远远不及代码适配的。
什么样的网站适合代码适配代码适配我们需要面对的问题就是后期维护的工作比较复杂,因为不同设备对应了不同的代码及页面模板文件,当对于网站需要调整的时候那么工作量会多出几倍。
所以,这种适配方式还是比较适合网站结构比较简单,页面种类比较少的站点,比如企业站点、个人博客等。同时处于后期维护的复杂性,没有一定的技术条件的站点是不建议使用这种适配方式。
如何实现代码适配第一步就是确立服务器开启了Vary:User-Agent,只有这样用户客户端的任何请求信息中会包含UA的信息。
查看自己网站的http响应头的方法有很多,Linux服务器端可以直接使用这个shell命令:curl–headhttp://www.xxxx.com/;Chrome浏览器自带的抓包工具也可以查看;或者直接使用站长平台的抓取诊断工具就可以。
如果没有开启Vary:User-Agent那么服务器/CDN/缓存会认为是相同的页面,直接给用户返回缓存的页面,而不会再去web服务器请求相应的页面。
$UA=strtoupper($_SERVER['HTTP_USER_AGENT']);if(preg_match("/(iPhone|iPad|iPod|Android)/i",$UA)){/*加载相应的模板文件*/}
第二部后端配置
这段代码含义是,首先通过$UA=strtoupper($_SERVER['HTTP_USER_AGENT'])通过识别出用户的user-agent,根据if条件判断匹配不同的页面模板,可以根据实际的应用需求去更改httpuser-agent关键字。
第三部正确性保障,在实际运用中用户的设备是十分的复杂的,我们不能确保PC移动设备判断区分完全的准确,包括搜索引擎有的时候在页面种类的区分上也会出现错误的问题。
这个时候我们需要在上一个保险,那就是Metaapplicable-device标签关键词字,如果是PC端的模板文件,则在<head></head>之间添加<metaname="applicable-device"content="pc">;
如果是移动端的模板文件,则在<head></head>之间添加<metaname="applicable-device"content="mobile">;这种可以更加明确的告知搜索引擎当前页面是PC还是移动,双管齐下会更加的有保障。
个人/企业网站建设:698元,联系电话:15093778828
更多网站建设 商城系统程序 定制程序开发需求请咨询在线客服!
本文地址:http://zgcaiyu.com/article/info/2377
转载请注明来自:http://zgcaiyu.com/article/info/2377
发送后我们会尽快联系您!
18年行业经验,10万用户的选择
感谢留言 我们会尽快与您联系 关闭 150 9377 8828 发送 在线咨询欢迎您!
点击按钮接通人工客服!
15093778828