wordpress - 如何在wordpress中修改移动响应版本结构

Question

我有一个响应式的 wordpress 主题。在桌面版本中，它加载了一些元素（例如 jquery carousel）。我希望在移动版本中使用它，它不会加载某些组件（例如轮播）。有可能吗？如何 ？仅使用带有 disply:none 的 css 吗？通过这种方式，它无论如何都会加载脚本。有人可以帮助我吗？谢谢并原谅我的英语不好。

Answer 1

首先要确保您的 div 没有隐藏在样式表中的移动媒体查询中（可能是 style.css）

@media screen and (min-device-width: 319px) and (max-device-width: 640px){ 
/*carousel NOT display:none;*/
}

第二个是使用响应式 jQuery。有很多东西要学，但这个 Bones 主题脚本可能会让你开始：

jQuery(document).ready(function($) {

    /*
    Responsive jQuery is a tricky thing.
    There's a bunch of different ways to handle
    it, so be sure to research and find the one
    that works for you best.
    */

    /* getting viewport width */
    var responsive_viewport = $(window).width();

    /* if is below 481px */
    if (responsive_viewport < 481) {

    } /* end smallest screen */

    /* if is larger than 481px */
    if (responsive_viewport > 481) {

    } /* end larger than 481px */

    /* if is above or equal to 768px */
    if (responsive_viewport >= 768) {

        /* load gravatars */
        $('.comment img[data-gravatar]').each(function(){
            $(this).attr('src',$(this).attr('data-gravatar'));
        });

    }

    /* off the bat large screen actions */
    if (responsive_viewport > 1030) {

    }