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

aowana 发布于 2017-05-11 22:14     分类:站长学院     来源:爱玩电脑     阅读(3015)    

最近一直在忙其它事情,网站更新得少了。 今天写一篇关于网站实现移动适配的文章,记录一下萝莉图(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 (右键另存为下载文件)

标签Tags:网站

本站内容未经允许欢迎转载但必须保留原出处链接,部分内容来源互联网版权归原作者所有。

赞 (0) 打赏
上一篇:PHP PDO MySQL LIKE %Q%模糊查询实例 下一篇:知识普及:关于搜索引擎的几个小技巧

推荐阅读

网友评论

头像
推荐

欢迎访问爱玩电脑网

分享最实用的电脑知识和应用技巧,关注IT行业资讯、学装机、玩硬件还有各种搞机新姿势~

 

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏
二维码A
微信扫一扫打赏
二维码B