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

我没有使用jquery mobile。

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

这是前端加载的内容：

所以我的问题如下：

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

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

有没有人这样做过？

Answer 1

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

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

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

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

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

要将此实现到您的代码中，您将使用：

 
 CODE  

在此处阅读更多信息： 移动设备技巧

Answer 2

许多年后，许多测试以及培训和一般经验。

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

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

我在我的WordPress旁边使用了PHP Image Library来生成和加载我想要的大小和质量的图像，并允许我动态地改变大小。

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

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