Question

我一直在处理一个页面，该页面有两个布局，取决于用于查看页面的设备的宽度：

/*Above is Mobile*/
@media screen and (min-device-width: 600px){
/*Below is Web*/

}

这种方法基本上采用了各种各样的网络＆＃34;和＆＃34;移动＆＃34;整个页面中的div，并根据任一布局的需要显示，隐藏或更改它们;然而，当＆＃34; web＆＃34; div是隐藏的，它们仍然由移动设备加载，可能会减慢页面加载速度。

我的第一个想法是，如果我只能定义＆＃34;移动＆＃34; divs而不是＆＃34; web＆＃34; divs，然后我可以避免加载所有这些额外的元素。因此，HTML是否存在类似于CSS媒体查询的方法？或者，有没有办法根据显示页面的设备宽度定义两个不同的HTML布局？

编辑：至少就图像和图形而言，更好的方法是使用CSS来定义图像而不是HTML。因此，而不是做：

<div id="img"><img src="URL"></div>

...并试图隐藏div，你会采用这种方法：

<div id="img"></div>

和...

div#img {
background: none;
}

/*Above is Mobile*/
@media screen and (min-device-width: 600px){
/*Below is Web*/

div#img {
background: url(URL);
    height: 400px;
    width: 600px;
}
}

因此，移动版本不会加载图片，我们仍然只使用CSS。

Answer 1

或者，有没有办法定义两个不同的HTML 布局基于显示页面的设备宽度？

这是采取imho的路线。 HTML没有类似的机制来为视口定义不同的规则集。

Answer 2

我认为有一些js选项。这个对话有帮助吗？

What is the best way to detect a mobile device in jQuery?

HTML - HTML的“CSS媒体查询”行为？

2 个答案: