在移动视图中删除HTML元素？

Question

我没有使用jquery mobile。

我在WordPress中构建了一个模板，并且每个页面都有一个全宽背景可以设置为不同的背景：Background_1.jpg = Home，Background_1.jpg = About，ens ....

这是前端加载的内容：

<div id="bg">
    <img id="background" src="images/Background_1.jpg" alt="background">
</div>

所以我的问题如下：

当我进入流体网格布局时，我想完全删除此元素以加快加载时间。

我也不想隐藏它，我想在窗口大小小于600px时删除html。

以前有人这样做过吗？

Answer 1

在css中使用媒体查询。 像这样：

@media (max-width: 767px) {
    .styleName {
        display:none;
    }
}

如果窗口大小小于767px，则隐藏css元素。你需要在html中使用正确的标记：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

要隐藏移动视图上的div，您需要正确的窗口大小。这与引导框架有关：

/* Landscape phones and down */
@media (max-width: 480px) { ... }

要在您的代码中实现此功能，您可以使用：

<div id="bg" class="styleName">
CODE
</div>

在这里阅读更多内容： Mobile Device Trick

Answer 2

很多年后，经过大量测试以及培训和一般经验。

对于这样的实例，我发现有不同的解决方案效果最好：

1. 使用可在WordPress中轻松完成的PHP图像库优化图像，这将使图像易于访问网络并在所有设备上更快地加载。
2. 使用PHP检测Apache请求的屏幕大小，并使用钩子加载模板文件。就像AMP插件为移动设备加载了不同的主题一样。
3. 使用PHP检测屏幕尺寸并根据尺寸优化/生成图像。

我在我的WordPress上使用PHP Image Library来生成并加载所需大小和质量的图像，并允许我即时更改大小。

对于屏幕/用户代理检测，我使用Mobile-Detect。

您也可以将这两种解决方案结合使用以获得最佳效果。