Question

我有一个响应的wordpress主题。在桌面版本中，它加载了一些元素（例如jquery轮播）。我想在移动版本中，它不会加载一些组件（例如轮播）。有可能吗？怎么样？只有css with disply：none？以这种方式，它负载无论如何脚本。有人能帮助我吗？谢谢，请原谅我的英语不好。

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) {

    }

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

1 个答案: