基于PHP的移动设备网站优化
上上篇文章收集了一些基于PHP的移动设备检测方法, 我可不是凭空收集这个, 而是真正要运用到网站中的.
这不, 这几天利用下班时间对自己一个网站进行了移动设备的访问优化. 之所以下决心优化一下, 是因为访问统计显示移动设备的访问量几乎占到了总访问量的50%. 优化迫在眉睫啊...
因为我那个网站比较简单, 主要就2, 3个页面, 所以我只要针对这2, 3个页面进行优化就行了.
如果是大型复杂的网站, 由于页面众多, 如果每个页面的模块都去写2个版本, 无疑是不合理的, 后期维护也是个大麻烦, 这个时候就应该单独搭建一个针对移动设备的版本, 比如现在很多网站都提供的m.abc.com.
下面讲讲大概过程:
1. head部分优化
要想网站在移动设备有良好的访问效果, 最重要的是在head使用viewport, 然后宽度设成device-width, 比如:
<?php if(is_mobile()){?>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" type="text/css" href="css/mobile.css" />
<?php } else{ ?>
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
<?php } ?>
通过这一段, 就可以让pc和移动设备访问不同的css, 然后通过不同的css来实现不同访问设备下的效果. 如果不知道上面的 if(is_mobile()) 怎么来的, 请看这里.
上面的meta是最基本的一个属性. 移动端网站制作中, 还有很多属性可以利用, 每行代码的意思都可以在网上轻松查到, 如下:
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<link rel="apple-touch-icon-precomposed" href="../1.png"/>
<link rel="apple-touch-startup-image" href="../2.png"/>
2. 页面内容部分优化
比如页面上有一个广告模块, 在电脑上显示728x90的广告大小. 在手机上, 就不能使用这个大小的广告模块了, 所以需要针对移动设备再写一个合适的模块, 如:
<?php
if(is_mobile()){
echo '320x50';
}else{
echo '728x90';
}
?>
大概思路就这样. 下一篇我再介绍下如何在移动网站上投放AdSense 移动内容广告.
