前端集合 - 关注前端技术和互联网免费资源

关注前端技术和互联网免费资源

分类儿

页面儿

搜索儿

订阅儿

前端集合 RSS订阅
Home » 经验记录 » 基于PHP的移动设备网站优化

基于PHP的移动设备网站优化

发布者:前端集合 // 发布时间:2013-02-22 08:00:00 // 分类:经验记录 // 访问: 1,533 次 // 热度: 0人参与

image

上上篇文章收集了一些基于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 移动内容广告.

Tags: 移动设备, PHP, 移动网站优化, 触屏版网站, 手机网站优化, 移动设备网站优化

如何使用AdSense移动内容广告>>  << 如何直接在github上预览html网页效果
Top