在移动视图中删除HTML元素？ [英] Removing HTML element on mobile view?

问题描述

我没有使用jquery mobile。

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

I built a template in WordPress and have a full width background that can be set to a different one for each page: Background_1.jpg = Home, Background_1.jpg = About, ens....

这是前端加载的内容：

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

所以我的问题如下：

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

When i get to the fluid grid layouts i would like to remove this element completely to speed up the load time.

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

I also dont want to hide it, i want to remove the html when the window size is smaller than 600px.

以前是否有人这样做过？

Has anyone done this before?

推荐答案

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

Many years later and lots of testing as well as training and general experience.

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

There are different solutions that I have found works best for instances like this:

1. 使用PHP图像库优化图像，这可以在WordPress中轻松完成，这将使图像Web友好并加载所有设备上的速度都更快。


2. 使用PHP检测Apache请求的屏幕大小，并使用钩子加载模板文件。就像AMP插件为移动设备加载不同的主题一样。


3. 使用PHP检测屏幕大小并根据大小优化/生成图像。

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

I used PHP Image Library along side my WordPress to generate and load the images in the size and quality I want and allows me to change size on the fly.

对于屏幕/用户代理检测，我使用< a href =https://github.com/serbanghita/Mobile-Detect =nofollow noreferrer>移动检测。

For the screen/user-agent detection I use Mobile-Detect.

你可以同时结合这两种解决方案以获得最佳效果。

You can also combine both of these solutions for best results.

这篇关于在移动视图中删除HTML元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！