Question

我是一个小型企业主（迄今为止）管理过一个成功的网站。

但是，对于待定的Google Mobilegeddon，由于某种原因，我的网站未通过Google移动友好测试（https://www.google.com/webmasters/tools/mobile-friendly/）。我相信这是由滑块引起的，当我禁用滑块插件并将其删除时。该网站通过了它。

该网站使用Catalyst / Dynamik作为子主题在WordPress中构建。我用于滑块的插件是Soliloquy。我尝试了很多不同的滑块，此时我只想取出响应/移动版本的滑块。

我将此作为响应式面板中的代码：

#header-wrap {background:none !important;}
.logo-image #header-wrap #header {width:100%;text-align:center;}
.logo-image #header #header-left {width:200px;background:url('images/air-conditioning-brisbane.png') no-repeat scroll center top transparent;margin:0 auto !important;}
.logo-image #header-left, .logo-image #header-left #title, .logo-image #header-left #title a {width:200px;}
#callus {margin-top:5px;margin-bottom:5px;}
.slider-wrapper, #soliloquy {display:none;}

我认为这与最后一行有关。

我可以请求任何帮助，以帮助从移动/响应版本中删除滑块。

非常感谢您的帮助。 :)

Answer 1

这里有些部分不在上下文中，但如果您有权编辑CSS，那么这应该不是问题。我也不确定你的技能等级，所以我假设你的编码经验接近于零。

首先，您需要找到元素的选择器。您可以使用Chrome或Firefox并右键单击滑块并使用Inspect Element来完成此操作。找到根元素并记下它的选择器。如果它们存在，请查看“class”和“id”属性。最好抓住身份证。然后CSS文件应如下所示：

/* up to wide mobile */
@media screen and (max-width: 768px) {
    /* using the ID of the element */
    #my-slider {
        display: none;
    }

    /* using the class of the element */
    .my-slider {
        display: none;
    }
}

如果仍未在移动设备上隐藏它可能是因为优先级，您可以通过向CSS选择器添加更多父项和/或添加！important标志来增加优先级。

body .my-slider {
    display: none !important;
}

如果您正在使用Jetpack插件，您还可以将样式粘贴到自定义CSS样式表中，或者您也可以将样式粘贴到/ wp-content / themes / catalyst-theme / style中的style.css文件中。的CSS。

Answer 2

您需要使用媒体查询来隐藏此内容。包含幻灯片的div的类似乎是.soliloquy-container，所以将以下内容添加到样式表的底部

@media screen and (max-width: 768px) {
 .soliloquy-container {
    display: none;
 }
}

那应该为你解决问题 - 让我知道它是否

Answer 3

虽然使用css媒体查询隐藏移动设备的滑块是完全可以接受的，但是：

@media screen and (max-width: 768px) {
 .your-slider-container {
    display: none;
 }
}

值得注意的是，即使没有显示图像，图像仍然会被加载。

如果您要提供1100到1920像素宽的大型桌面图像，那么3g移动网络上的加载时间会更长，并且会对用户在他们看不到的东西上浪费带宽感到不公平。< / p>

我建议使用以下解决方案：

1）默认情况下将滑块设置为隐藏：

.your-slider-container {display: none;}

2）将滑块中所有图片的src属性（img）交换为data-src，以便在页面加载时不会请求图片;如果屏幕大于您想要的大小，请使用以下Javascript调用图像。

if (window.innerWidth >= 768) {

    var slider = $('.your-slider-container');

    slider.find('img').each(function() {
        $(this).attr('src', $(this).data('src'));
    }); //load images

    slider.sliderPluginName(slider_options); //call slider
    slider.show();

}

如何从响应式设计中删除滑块

3 个答案: