有田笔记

PC网站修改为自适应移动端网站

字号+作者:有田笔记 来源:有田笔记WP老站 2015-12-11 15:08 我要评论() 收藏成功收藏本文

先说一下有田笔记(www.shengliyoutian.com)的移动建站之旅:第一步,在有田笔记上线的第一时间,有田笔记就利用百度siteapp创建了移动站,相同的产品还有搜狐的'...

先说一下有田笔记(www.shengliyoutian.com)的移动建站之旅:

第一步,在有田笔记上线的第一时间,有田笔记就利用百度siteapp创建了移动站,相同的产品还有搜狐的快站。基本原理是百度将原网站抓取,绑定新域名m.shengliyoutian.com,然后在在网站的<head></head>之间加入识别代码,当使用移动设备进行访问主网址时会自动跳转到移动域名。

该种方式完全免费的,只是模板有点丑,但是可接接受,而且百度的移动版本只要在相应的位置输入百度联盟广告位的UID就可以投放广告。以上几点都相当可以接受,唯一的一点就是这种方式会把网页有用没用的全部都抓取过来,页面会非常的乱。抓博客还可以,抓其它网站乱的不像样子。

第二种:直接新做一个移动的页面,比较放下下面的某个文件夹或者直接主目录下创建个indexapp.php,里面相同的调用数据库,版面做的小一些,做成小尺寸的,在头部文件加入移动设备识别跳转代码。

第三种,就是下面讲的这样,加入css进行控制。以前我也以为会使用HTML5,JQuery结合什么的,让人非常绕道的,可是看到下面这篇文章后感觉感觉给自己倒拾的勇气,下面分享给大家。

网站自适应,很多人都认为是很高级需要很多时间去实现的东西,不愿意去把一个现成的网站改成自适应,宁愿单独另外做一个移动站。我之前觉得实现网站 自适应,要设计很多套CSS,并且要结合jQuery,来实现自适应不同的设备。我还以为要重新设计文章的图片,或者要用到JavaScript来控制图 片尺寸,因为图片过大就会超出手机屏幕,而这个工作量是非常可怕的。种种顾虑使我一直不敢着手开刀,造成至今网站还只是一个PC版,而也没有多做一个移动 版。

经常在群里看到大家都说移动流量怎么多怎么多,有的还说移动流量大大超过了PC流量,说移动流量的广告点击率也比PC流量高,潜移默化的作用,我也慢慢受到了感染,于是决定把网站改成自适应!

我为什么是把网站改为自适应,而不是改为一个单独的移动站?因为我想一劳百逸,不想同时维护PC站和移动站,这将为日后更新文章节省大量的时间。

由于是第一次接触,没有实际经验,所以需要边找资料看案例边修改代码。

令我感到非常意外的是,我竟然仅需一天时间就完成了修改工作!

 1 2 3 4 5 6 下一页 尾页

看过本文的人还看过

1.如果您觉得文章帮助了您,可以点击下面的广告来支持我,谢谢!2.本站的原创文章,请转载时务必注明文章作者和来源,谢谢!3.作者投稿可能会经我们编辑修改或补充,并且会注明版权来源,谢谢!

相关文章
网友点评