电脑桌面
添加小米粒文库到电脑桌面
安装后可以在桌面快捷访问

网站实现移动适配之Meta标注、移动跳转VIP免费

网站实现移动适配之Meta标注、移动跳转_第1页
1/7
网站实现移动适配之Meta标注、移动跳转_第2页
2/7
网站实现移动适配之Meta标注、移动跳转_第3页
3/7
必须申明的是,本文的所有做法仅适合非响应式网站,并且需要一个额外的移动站,比如:创建移动站点后,我们再通过一个js来判断访问者的UA信息,实现自动跳转功能。所以,移动站点的创建主要是为了弥补PC站在移动小屏设备下显示不佳的缺憾。然而,搜索引擎却会将他们视为不同的站点,从而影响SEO。为了解决这个问题,我们就必须遵循搜索引擎的移动适配原则,对2个站点进行移动适配。目前几个搜索引擎的移动适配做法如下:百度:xml对应关系适配、Meta标注适配(特有);谷歌:Meta标注适配(同样适合雅虎、必应等国外搜索引擎);360:txt对应关系适配。下面主要分享下META标注和移动跳转的部署方法:一、完整代码示例以首页举例,实现移动适配META标注、移动站跳转的做法如下:①、在PC站点部署代码:head部分:uaredirect("http://m.chongzuo6.com/");footer部分:移动版②、在移动站点部署代码:head部分:uaredirect("http://www.chongzuo6.com");footer部分:电脑版以上则为首页的移动适配+跳转的完整代码,但一个网站有N多页面,所以我们必须做成动态代码,实现每个网页的移动适配及跳转!二、动态部署代码要做动态部署代码,就得考虑建站程序所用语言,目前最流行的建站语言主要是php和asp。php以wordpress为主,其次有emlog、typecho等,asp则主要是ZBlog。以往张戈博客的文章分享的适配全部都是wordpress专用的,而且代码繁杂,通用性很差!最近,张戈在给博客的标签页做移动适配的时候,突来灵感,找到了一个最简单通用的方法,可以应用到所有建站程序!核心思想很简单:既然是每个页面都要做移动适配,那么先动态获得当前页面地址,然后进行规则替换即可!①、Wordpress专用我们先将如下代码加到header.php$current_url=home_url(add_query_arg(array(),$wp->request));$target_url=str_replace("http://","http://m.","$current_url");?>然后继续添加如下代码,就能完成所有页面的PC站点的移动跳转和移动适配:/js/uaredirect.js"type="text/javascript">uaredirect("");"/>"rel="alternate"media="onlyscreenand(max-width:1000px)"/>至于移动站的适配,依葫芦画瓢,把进行替换的那句中的http://和http://m.换一个位置即可!这还要多简单??②、PHP通用I、PC站点:在PC站点的head部分添加php函数(WP可直接加入function.php模板中),用于获取当前页面的移动地址:functioncurMobURL(){$pageURL='http';if($_SERVER["HTTPS"]=="on"){$pageURL.="s";}$pageURL.="://m.";$this_page=$_SERVER["REQUEST_URI"];if(strpos($this_page,"?")!==false)$this_page=reset(explode("?",$t...

1、当您付费下载文档后,您只拥有了使用权限,并不意味着购买了版权,文档只能用于自身使用,不得用于其他商业用途(如 [转卖]进行直接盈利或[编辑后售卖]进行间接盈利)。
2、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。
3、如文档内容存在违规,或者侵犯商业秘密、侵犯著作权等,请点击“违规举报”。

碎片内容

网站实现移动适配之Meta标注、移动跳转

确认删除?
VIP
微信客服
  • 扫码咨询
会员Q群
  • 会员专属群点击这里加入QQ群
客服邮箱
回到顶部