2014-10-16 63 views
1

我有一個視頻背景,因爲它需要相當多的MB加載,我想禁用智能手機上的視頻。 的CSS本身很簡單:目標只有智能手機與媒體查詢

video{ 
    display:none; 
} 

但是,如何讓媒體查詢,以便它不會影響到臺式機和筆記本電腦屏幕?由於智能手機越來越高,分辨率越來越高,以往只針對少量像素(例如±450像素)的舊方法將不再適用於較新的智能手機。 智能手機的寬度和高度應該不重要,我在我的「常規」媒體查詢中修正了這一點,以便在設計中斷時改變CSS。

+2

雖然它應該'顯示:none'不一定要使您的視頻無法加載。在生成HTML的服務器端可以更好地處理這個問題。 – 2014-10-16 15:07:03

+0

我認爲這也許應該是一個更廣泛的問題。事實上,如果我們確實有某種方式來查詢用戶的連接以查看是否適合發送大型圖像或視頻,那就太好了......我可以肯定地看到「有限數據計劃」作爲查詢的許多用途。 – 2014-10-16 15:07:14

+0

使用'@media only screen' – TylerH 2014-10-16 15:07:15

回答

0

使用類似

@media (max-width: 480px) { 

video { 
display: none; 
} 

} 

這將顯示爲無屏幕尺寸,最大爲480個像素(大多數智能手機)

+1

是不是已經過時,因此太小?由於較新的智能手機具有更大的分辨率:http://www.gizmag.com/smartphone-comparison-2014-1/31787/ – Lisa 2014-10-16 15:16:02

+0

那麼在理論上是針對iphone 3g/smasung s2等這麼古老。您可以根據您希望定位的設備進行相應的調整。 – eggman 2014-10-16 15:17:57

+0

我不認爲黑莓仍然被使用/銷售了。至少,它不是*人們說的「智能手機」時人們所稱的。 – TylerH 2014-10-16 15:18:31