随着移动网络流量逐渐超过桌面电脑的流量,大家对移动版网站越来越重视了,现在国际主流的做法是以自适应的方式增加网站对移动客户端的友好度,另外一种比较常见的方法就是专门为移动网络开发一个版本。两种方式各有利弊,自适应的方式当然是通过 CSS 来实现,专门的移动网站往往是通过程序判断来是实现的,WordPress 给我们提供了一个非常便利的函数来实现这个需求。
WordPress 方法:
- if( wp_is_mobile() ) {
- // 显示移动版网站内容
- } else {
- // 显示桌面版网站内容
- }
通过这个函数,我们也可以实现在一个网站上专门为移动浏览器或桌面浏览器显示某些内容,相比 CSS 的方法,各个平台的浏览器只加载相应的内容,可以剩下一些不必要的流量。
PHP 方法:
- <?php
- function isMobile()
- {
- // 如果有HTTP_X_WAP_PROFILE则一定是移动设备
- if (isset ($_SERVER['HTTP_X_WAP_PROFILE']))
- {
- return true;
- }
- // 如果via信息含有wap则一定是移动设备,部分服务商会屏蔽该信息
- if (isset ($_SERVER['HTTP_VIA']))
- {
- // 找不到为flase,否则为true
- return stristr($_SERVER['HTTP_VIA'], "wap") ? true : false;
- }
- // 脑残法,判断手机发送的客户端标志,兼容性有待提高
- if (isset ($_SERVER['HTTP_USER_AGENT']))
- {
- $clientkeywords = array ('nokia',
- 'sony',
- 'ericsson',
- 'mot',
- 'samsung',
- 'htc',
- 'sgh',
- 'lg',
- 'sharp',
- 'sie-',
- 'philips',
- 'panasonic',
- 'alcatel',
- 'lenovo',
- 'iphone',
- 'ipod',
- 'blackberry',
- 'meizu',
- 'android',
- 'netfront',
- 'symbian',
- 'ucweb',
- 'windowsce',
- 'palm',
- 'operamini',
- 'operamobi',
- 'openwave',
- 'nexusone',
- 'cldc',
- 'midp',
- 'wap',
- 'mobile'
- );
- // 从HTTP_USER_AGENT中查找手机浏览器的关键字
- if (preg_match("/(" . implode('|', $clientkeywords) . ")/i", strtolower($_SERVER['HTTP_USER_AGENT'])))
- {
- return true;
- }
- }
- // 协议法,因为有可能不准确,放到最后判断
- if (isset ($_SERVER['HTTP_ACCEPT']))
- {
- // 如果只支持wml并且不支持html那一定是移动设备
- // 如果支持wml和html但是wml在html之前则是移动设备
- if ((strpos($_SERVER['HTTP_ACCEPT'], 'vnd.wap.wml') !== false) && (strpos($_SERVER['HTTP_ACCEPT'], 'text/html') === false || (strpos($_SERVER['HTTP_ACCEPT'], 'vnd.wap.wml') < strpos($_SERVER['HTTP_ACCEPT'], 'text/html'))))
- {
- return true;
- }
- }
- return false;
- }
- ?>
Script 方法一
- <script type="text/javascript">
- function browserRedirect() {
- var sUserAgent= navigator.userAgent.toLowerCase();
- var bIsIpad= sUserAgent.match(/ipad/i) == "ipad";
- var bIsIphoneOs= sUserAgent.match(/iphone os/i) == "iphone os";
- var bIsMidp= sUserAgent.match(/midp/i) == "midp";
- var bIsUc7= sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
- var bIsUc= sUserAgent.match(/ucweb/i) == "ucweb";
- var bIsAndroid= sUserAgent.match(/android/i) == "android";
- var bIsCE= sUserAgent.match(/windows ce/i) == "windows ce";
- var bIsWM= sUserAgent.match(/windows mobile/i) == "windows mobile";
- if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
- alert('手机站链接');
- }
- else {
- alert('PC站链接');
- }
- }
- browserRedirect();
- </script>
Script 方法二
- <script type="text/javascript">
- function browserRedirect() {
- var browser={
- versions:function(){
- var u = navigator.userAgent, app = navigator.appVersion;
- return {//移动终端浏览器版本信息
- trident: u.indexOf('Trident') > -1, //IE内核
- presto: u.indexOf('Presto') > -1, //opera内核
- webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
- gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
- mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
- ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
- android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
- iPhone: u.indexOf('iPhone') > -1 , //是否为iPhone或者QQHD浏览器
- iPad: u.indexOf('iPad') > -1, //是否iPad
- webApp: u.indexOf('Safari') == -1, //是否web应用程序,没有头部与底部
- weixin: u.indexOf('MicroMessenger') > -1, //是否微信
- qq: u.match(/\sQQ/i) == " qq" //是否QQ
- };
- }(),
- language:(navigator.browserLanguage || navigator.language).toLowerCase()
- }
- if(browser.versions.mobile || browser.versions.ios || browser.versions.android || browser.versions.iPhone || browser.versions.iPad){
- alert('手机站链接');
- cambrian.render('head')
- }
- }
- browserRedirect();
- </script>