近来越来越多手机WAP、自适应网站,可见移动网页是未来,响应式是未来!但是在实际经验中,我们发现:响应式自适应虽然在国外非常流行了、大家都在追随,不过在国内,由于XP上ie6、IE8,带宽等问题,有一部分客户,更喜欢PC+WAP的方式,这样手机版可以做成不一样、WAP加载起来快一点,更重要的PC还可以兼容低版本IE呢。今天,跟大家分享最近看到而又可以用来具体实践自定义PC+WAP模板的一个方法:Phpcms V9自定义手机WAP模板新方法。
1、修改/modules/content/index.php文件,在里面找到如下代码:
include template('content',$template);
修改为:
if(substr($_SERVER['SERVER_NAME'], 0,1) == 'm'){ include template('mobile',$template); }else{ include template('content',$template); }
以上代码是根据域名判断,给Phpcms v9添加自适配,调用不同目录的模板:判断当前页面url中第一个字符为m时则调用mobile目录模板,否则调用content目录模板。
由于Phpcms v9是调用网站URL方式,文章的URL地址都固定写死在数据表中,所以页面中的标签不能在使用{$r[url]},而要改成{str_replace('http://www.','http://m.',$r[url])},这样做到截取url,把http://www.你的域名/ 替换成http://m.你的域名/。
这里我们就完成了手机版的设置了,然后我们在制作一套手机端模板放在mobile目录就好了。
如果我们要在PC端的内容里面加上当前页面手机端的链接,链接地址写法如下:
http://{str_replace('www.','m.',$_SERVER['SERVER_NAME'])}{$_SERVER['REQUEST_URI']}
反之,手机端加上PC端的链接:
http://{str_replace('m.','www.',$_SERVER['SERVER_NAME'])}{$_SERVER['REQUEST_URI']}
如果你使用的是静态页面,那么只要在模板页头加上以下JS代码就可以实现判断手机端自动跳转到手机端了。
具体代码:
<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) { {if $catid=='' and $id==''} window.location.href="{APP_PATH}/index.php"; {elseif $id=='' and $catid!=''} window.location.href="{APP_PATH}/index.php?m=content&c=index&a=lists&catid={$catid}"; {else} window.location.href="{APP_PATH}/index.php?m=content&c=index&a=show&catid={$catid}&id={$id}"; {/if} } } browserRedirect(); function closewindow() { $("#register-box").hide(); } function openwindow() { $("#register-box").show(); } </script>
以上内容,改编自axguowen,在此多谢!