怎么显示:无;影响移动设备的CSS?

时间:2010-07-13 11:37:25

标签: css mobile-safari mediaelement

如果我们使用display:none隐藏了一些东西;例如:图像,还能通过渲染引擎下载吗?如果是的话,这是否意味着在移动设备上打开相同的网页时,下载会不必要的额外重量?

这可能进一步意味着修改移动设备的同一网页可能是一个坏主意。请指教。感谢。

2 个答案:

答案 0 :(得分:3)

是的,整个页面都已下载(隐藏元素和全部)。在浏览器的CSS引擎处理页面之前,display:none毫无意义。

答案 1 :(得分:0)

有几种方法可以阻止图像下载,图像是内嵌的,或者是CSS样式中的背景图像,还是通过媒体查询引入的图像。它几乎适用于所有移动设备(除了'Fennec 10.0+'是唯一仍然下载图像的设备.-参见Tim Kadle的测试结果)

蒂姆卡德莱克的'媒体查询&资产下载测试结果的研究地点:

http://timkadlec.com/2012/04/media-query-asset-downloading-results/

它说,对于背景图像,隐藏父元素。如果您不能这样做,则使用媒体查询将背景图像设置为仅在屏幕或设备大小为特定大小时下载。只需通过放入内部媒体查询来定义您想隐藏/不下载的内容。这不是很了不起。

另一项精彩的测试,使用,如此简单,在: http://timkadlec.com/mq/test4.php

在此测试中,您只需调整浏览器窗口的大小即可模仿“桌面”或“移动设备”以查看是否正在下载与媒体查询相关的图像。您只需单击要测试的每个方案的链接。