网站实现移动适配实例教程之代码适配

2017年05月11日 22:14   站长学院   网站  

最近一直在忙其它事情,网站更新得少了。 今天写一篇关于网站实现移动适配的文章,记录一下萝莉图(luolitu.com)实现手机端、电脑端自动适配的方法。

网站为什么要移动适配?

现在移动端流量越来越多,手机、平板等移动设备成为用户主要的上网设备,Google 曾公开表示“移动优先”的策略,网站实现移动适配很有必要,针对不同的设备展示不同的页面实现更好的用户体验。


移动适配


网站如何实现移动适配?

首先需要在百度站长平台设置网站属性,登录之后找到“我的网站”— “站点管理”—“站点属性设置” , 如下图所示:

设置站点属性

(点击查看大图)

接下来,修改“站点类型”为“代码适配”,如下图所示:

站点属性

(点击查看大图)

百度提供几种不同移动适配的方法,下面一起了解一下。

一、PC站对应的移动站

这种网站移动适配的方法很普遍,PC与移动是两个不同的站点
例如 aowana.com/news  对应 wap.aowana.com/news
网页的URL完全不同,但主要内容相同存在对应关系。

二、模板自适应实现网站移动适配

通过模板实现移动适配也是许多网站正在使用的方法,这些网站通常使用类似 bootstrap 前端框架,它们能实现根据设备分辨率自动调整容器的大小以适应移动设备,使用这种方法移动端和电脑端访问的URL相同 ,而且网页代码不变但页面显示效果有所不同。

三、通过代码适配动态显示

这种方法仅适用于动态网站,通过判断 user agent 实现电脑端、移动端显示不同的页面,使用这种方法URL相同,电脑端和移动端网页代码不同

通过代码适配实现移动适配

PHP 为例,我们只需要在视图方法 template() 中加入 user anget 判断就好了,例如:

function template ( $filename, $data=array() )
{
	$path = SYS_PATH . '/template/';
	$path = is_wap() ? $path . 'wap/' : $path;
	$path = $path . $filename . '.tpl';

	if ( file_exists($path) )
		include( $path );
	else
		echo "TPL : {$filename} Not Found";
}
如果 is_wap() 返回 true , 模板文件目录追加 wap/ ,当然移动端对应的模板文件都存放在 wap/ 目录下。

关于 is_wap()

我的 is_wap() 方法是通过国外的 Mobile_Detect 类库实现,非常好用的PHP类库,相应代码也贴上来。

function is_wap ( )
{

	if ( !class_exists('Mobile_Detect') )
		require( SYS_PATH . '/lib/Mobile_Detect.php');

	$obj = new Mobile_Detect();

	# 所有移动设备
	# $detect->isMobile()

	#所有平板设备
	# $detect->isTablet()

	# 移动但非平板设备
	# $detect->isMobile() && !$detect->isTablet()

	# iOS 系统
	# $detect->isiOS()

	# Android系统
	# $detect->isAndroidOS()

	# WindowsPhone
	# $detect->isWindowsPhoneOS()

	if ( $obj->isMobile() )
		return true;
	else
		return false;
}
Mobile Detect 使用非常简单,它除了能够识别PC 、手机、平板,还能检测 Android 、 iOS 、Windows Phone 等移动系统,我们可以根据不同的用户群显示不同的页面,达到移动适配的目的。

相关附件: Mobile_Detect.class.php.zip (右键另存为下载文件)

相关阅读

网站增加讨论区话题功能设计实例
PHP 循环制作输出多列表格实例教程
网站实现扫描二维码图片加QQ群的方法
网站如何防止用户重复提交表单
新浪APP绑定独立域名备案实例
【Bootstrap】系列教程:优秀的前端框架
【HTML5】系列教程:HTML5简介
新浪 SAE Storage 实现绑定自定义域名
网站内容浏览量统计方案 (Memcache 缓存)
Googlebot可能会对网站发动DDoS攻击
【HTML5】系列教程:bdi 标签
【HTML5】系列教程:area 标签