删除移动视图上的HTML元素？

Question

我没有使用jquery mobile。

我在WordPress中构建了一个模板，并为每个页面设置了全角背景：Background_1.jpg =主页，Background_1.jpg =关于，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>

在此处阅读更多内容： 移动设备技巧

Answer 2

许多年后，进行了大量的测试、培训和一般经验。

我发现有不同的解决方案最适合这样的情况：

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

我使用PHP 图像库和 WordPress 来生成和加载我想要的尺寸和质量的图像，并允许我动态更改尺寸。

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

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