建站经验技巧手机版网站移动适配经验技巧总结

手机版网站移动适配经验技巧总结

很多新手朋友对于网站的移动化和移动适配不是很熟悉,网上相关的教程很多,但总让人看的一头雾水,这里我根据自己的理解,大致的总结一下自己的学习心得:

1. 网站如何移动化

1.1 自建独立移动站——多数站长采用的方法是,新建一个站点作为移动站,并绑定二级域名(m或wap,对应PC站www),而这个站与原PC站共用一个数据库及图片等附件,这样的话,移动站的内容会随着PC站同步更新。目前有的开源建站程序已经自带移动站的功能(如帝国CMS),如果加以运用的话,可以很方便的完成移动站。此外,有些朋友因为程序或技术等原因,将移动版网站放在PC站的某个子目录里,这种方式对搜索引擎并不友好,不建议这么做,其实如果实在只能这样的话,站长大可用二级域名绑定该子目录,亦可实现独立移动站的展现,在建设移动站的时候,注意其URL路径应该与PC站保持一致。

1.2 自适应设计——其实自适应的方式对于用户体验很好,虽然目前国内搜索引擎(百度,搜狗等)建议大家优先考虑独立的移动站,但不得不说未来自适应设计是大趋势,因为不改变网站的URL和源代码,只需要通过判断屏幕的尺寸或终端类型即可向用户展现更适合的页面,在技术方面,自适应也很简单,只要熟悉CSS语言,基本上就没什么问题。

1.3 其他适配工具——例如“云适配”具有强大的技术可以自动实现网站的移动化,有兴趣的朋友可以研究一下……

2. 关于百度站长平台中的移动适配

2.1 在站长平台设置好站点类型——站长工具中的站点属性设置,站点类型包括:PC站、移动站、PC/移动站,选择不同类型有可能会影响到百度对你的展现。如果你做好的移动站,在站长平台验证后,建议根据自己的移动化方式,设置好站点类型,比如我们采用自建移动站的方式的话,则选择“有对应PC站的移动站”这个选项。

2.2 移动适配工具——通过该工具告知百度移动站和PC站的对应关系,在提交规则方面,很多新手朋友觉得很复杂,实际上如果冷静分析自己的URL地址后,其实并不是很难,一般的网页地址类似于www. xyz .com/news/class_1/9988.htm,而我们一般自建的移动站为了方便,都会保持与PC站同样的目录结构,也就是wap. xyz .com/news/class/9988.htm这样,像这样的URL如果写成规则的话,应该是www. xyz .com/([a-zA-Z]+)/(\w+) /(\d+).htm,而该URL中有三个变量,所以对应的移动URL应该是wap. xyz .com/${1}/${2} /${3}.htm,然后网站其他的一些不在规则中的页面则可以通过提交URL对的方式提交。补充说明:百度的移动适配规则同样也适用于搜狗和好搜,所以大家写好了规则后,不妨也提交到其他支持的搜索引擎……

2.3 增加移动站的特征——如果在移动站里标明手机版、触屏版等字样的时候,会帮助搜索引擎或用户识别网站属性,移动站专用的代码viewport也是一个重要的依据,同时使用meta中的applicable-device属性标明自己的网站适合移动浏览。

2.4 做好PC站和移动站的对应关系——在PC版网页(www. xyz .com/page1/)中添加:<link rel="alternate" media="only screen and (max-width: 640px)" href="http: //m.xyz .com/page1" />,而在移动版网页(http: //m.xyz .com/page1/) 上,对应的注释上<link rel="canonical" href="http: //www.xyz .com/page1" />有助于布局两者之间的关系,这个大家可以将代码放置于网站模版的header中,做好对应的设置。

3. 如何让用户访问到你的移动站

如果是自适应或跳转适配的站点,用户在手机端输入网址后即可访问对应的手机版,而如果是独立建设的移动站,则需要做一个跳转,便于用户在手机端输入网址后跳到手机版。如果有技术条件的话,可以在服务器端设置识别浏览器的UA来做相应的301/302跳转,如果不方便做301/302的话,采用js也可以实现跳转。此外有朋友发现,在百度云加速中有PC站跳转移动站的功能,这个在DNS的层面进行跳转,应该比js要反映迅速一些,有使用百度云加速的站长可以试试。此外,在PC版的网站首页上,应该放上移动版的链接,也有细心的站长放上了移动站对应的二维码,这样用户可以方便的访问到移动站。

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cssaaa.com/website/47.html