不通过css删除移动滑块

时间:2019-04-07 作者:Ele

我们的网站www.irish-pure.de 有一个滑块。此标头当前已通过手机停用

@media (max-width: 640px) {
    .theme-slider-wrapper {
        display: none;
    }
    .benefit-bar__container {
        margin-bottom: 1rem;
    }
}
但当我查看google pagespeed insights页面时,google建议避免“隐藏”图像,并列出滑块图像。

是否有一种方法可以完全移除滑块以便移动,例如在功能中。php还是什么?

谢谢,E。

2 个回复
SO网友:tmdesigned

这是一个看起来应该有一个简单解决方案的问题,但实际上没有。有选择,只是不容易。

至少在我看来是这样。

CSS是检测浏览器宽度的最佳方法。事实上,您确实无法从PHP检测浏览器宽度。可以使用JavaScript,但这就是复杂性所在。

即使您可以在PHP中检测浏览器宽度,您也不会想这样做。如果他们将浏览器做大(即旋转设备),会怎么样?PHP已经过时了,不能再添加回去了。

有一个clever technique 我了解到,您在哪里使用新的HTML5图像srcset仍然以移动分辨率提供图像,但图像非常小。然而,由于您使用的是一个滑块,我想这意味着一个插件,所以您可能没有这种灵活性。

这就给您留下了JavaScript。如果浏览器宽度很小,可以删除图像,但需要保持观察视口宽度,以防其发生变化,并准备好将其放回原处。可能更好,只在需要时加载(即延迟加载)。您的滑块或其他选择可能只是在本机上为您提供了该功能。

SO网友:Pat_Morita

您需要更改加载滑块的模板。假设它是用php编写的,您可以使用这个类来检测站点是否从移动设备加载。如果它是由mobile加载的,就不要渲染滑块。

http://mobiledetect.net

相关推荐

Sidebar slideshow widget

有人知道可以放在边栏上的高质量图像幻灯片小部件吗?