wordpress移动端判断,选择性加载代码

          阅读(94)

    wordpress移动端判断,选择性加载代码

    wuli青夭不可用的是自适应模板,页面会为pc设备和mobile设备调整不同的样式。在后来的折腾中,博主又添加了许多特效代码。然后问题就来了,这些特效代码都会在pc端和mobile端显示。但是,有些代码我们却不需要它在mobile设备中加载。(比如,最近添加的“下雪”效果,要是搁在mobile端,页面就拖不了了。)于是乎,博主就搬来了这篇文章。

    教程写得很好,博主好久原封不动贴上来了。最后再说明一个问题。(非强迫症患者误视↓↓↓)

    本站的自适应是基于页面比例来调整的(通俗的说:长>宽,显示pc样式;宽>长,显示moblie样式。)然而,判断代码是基于浏览器UA来判断的(通俗的说:ios、android,显示moblie代码;win、mac,显示pc代码。)它们的判断机制不同,并不是无缝贴合的。如果访客用remix os浏览了pc页面,或是用win平板浏览了mobile页面,判断代码就会失效,页面就boom。(好吧,你肯定被我绕晕了!权当是屁话吧!)

    那么,这里有个完美的思路。我们要是也基于页面比例来判断是否加载特效,不就OK了。

    伪代码:
    if 页面长 > 页面宽 then
    加载pc样式
    else
    加载mobile样式
    end if

    好吧,我承认这段文字是废话。可是,你已经看完了。(^_^)

    原教程:

    转自: 流觞曲水 | https://ls12.me

    p.s. 彼站博主是偶滴同学&道友,亦是带我入wp坑的人……


    WordPress判断移动设备并加载不同代码

    最近一直在研究怎么优化流觞曲水的移动端访问的问题,因为流觞曲水的部分美化样式并不适合在移动端显示(比如动态背景,还有这个萌萌哒的四糸乃),其实WordPress中早已经引入了一个更强大,方便用的函数 wp_is_mobile()。这个函数可以自动检测出当前访客使用的浏览设备是不是移动设备,并返回一个布尔值,从而可以在移动端和PC端输出不同的代码,来完成你的自定义需求。
    查阅官方文档发现,这个函数位于 wp-includes/vars.php 中,其源代码为:

    /**

    * Test if the current browser runs on a mobile device (smart phone, tablet, etc.)

    *

    * @return bool

    */

    function wp_is_mobile() {

    if ( empty($_SERVER['HTTP_USER_AGENT']) ) {

    $is_mobile = false;

    } elseif ( strpos($_SERVER['HTTP_USER_AGENT'], 'Mobile') !== false // many mobile devices (all iPhone, iPad, etc.)

    || strpos($_SERVER['HTTP_USER_AGENT'], 'Android') !== false

    || strpos($_SERVER['HTTP_USER_AGENT'], 'Silk/') !== false

    || strpos($_SERVER['HTTP_USER_AGENT'], 'Kindle') !== false

    || strpos($_SERVER['HTTP_USER_AGENT'], 'BlackBerry') !== false

    || strpos($_SERVER['HTTP_USER_AGENT'], 'Opera Mini') !== false

    || strpos($_SERVER['HTTP_USER_AGENT'], 'Opera Mobi') !== false ) {

    $is_mobile = true;

    } else {

    $is_mobile = false;

    }

    return $is_mobile;

    }

    从代码里我们可以发现wp_is_mobile()已经可以识别大多数的移动设备的浏览器了,包括Iphone,ipad, android, silk, kindle ,BlackBerry,Opera Mini以及Opera Mini。这基本上已经满足了所有的移动设备了

    使用方法:

    如果你需要使特定的代码仅在移动端/PC端显示
    <?php if ( wp_is_mobile() ){ ?>

    (这里设置为移动端输出的代码,因为流觞曲水不需要,所以为空)

    <?php }else { ?>

    这里设置你电脑端需要输出的代码,移动端访问将不显示

    <?php } ?>

    如果你需要在移动端、电脑端输出指定内容:

    <?php if ( wp_is_mobile() ){

    echo '你正在使用移动设备浏览';

    }else{

    echo '你目前使用的不是移动设备';

    } ?>

    如果你恰好需要构建响应式布局,相信 wp_is_mobile()一定可以帮到你的。

    只是 wp_is_mobile() 虽然好用,但是也有一个局限性:

    每次调用都需要经过服务器的运算,也就是不支持静态化(缓存)。如果你的网页中调用了wp_is_mobile(),而你又恰好设置了缓存,那么就会出现 PC端可能访问到移动端页面,移动端访问PC端页面 的尴尬。

    为了避免这个尴尬情况的出现,我们需要借助于JavaScript,下面给出JavaScript版本代码

    /* 非移动端判断,加载下面的js代码 */
    if(!/iphone|ipod|ipad|ipad|Android|nokia|blackberry|webos|webos|webmate|bada|lg|ucweb|skyfire|sony|ericsson|mot|samsung|sgh|lg|philips|panasonic|alcatel|lenovo|cldc|midp|wap|mobile/i.test(navigator.userAgent.toLowerCase())){

    document.write('<script src="https://ls12.me/pc.js"></script>'); // 只在PC端加载js

    document.write('<link href="https://ls12.me/pc.css" />'); // 只在PC端加载的css

    }

    php版本和js版本大家各持所需,选择使用。


     

     

    Oh,对了。以上代码还可以优化下。如果你只是想让mobile端不显示pc端代码。可以把“else”语句块去了,换成“!”。

    <?php if?!( wp_is_mobile() ){ ?>

    (这里设置为移动端输出的代码)

     

    <?php } ?>

    2016-12-26 14:48:00


    喜欢 0



还没有人抢沙发呢~

加载中……