使用媒體查詢只在移動設備上包含JS文件

我正在嘗試使用媒體屬性將我的JavaScript文件鏈接到移動設備上，而不是桌面上。使用媒體查詢只在移動設備上包含JS文件

這裏是我的鏈接標籤：

<script type="text/javascript" media="screen and (max-width : 850px)" src="mobile.js"></script>

但是這是行不通的，它鏈接到JS的一切。

如何才能鏈接JS文件，如果它滿足這些查詢條件？

如果我不能如何運行JS如果它是移動的？

來源

2013-09-22 Joshua Soileau

如何使用JavaScript的呢？

<script type="text/javascript"> 

if (screen.width < 980) { 

    document.write('<script type="text/javascript" src="mobile.js"></script>'); 
} 

</script>

來源

2013-09-22 17:43:14 frenchie

這就是我最終做的。只是不知道是否有方法在HTML中指定它。謝謝！ –

@Josh被警告，這不適用於所有移動設備，如運行Android的三星Galaxy II。<3. – jshthornton

@jshthornton：爲什麼它不起作用？所有這些看起來都很符合標準;哪部分失敗？ – frenchie

有兩種方法可以做到這一點：

都已經在網頁上的腳本，並調用它們時，斷點被觸發
裝入腳本僅在需要時他們，一旦斷點滿足

無論哪種方式，你需要這樣的：

enquire.js

這將允許您爲js添加媒體查詢回調。

來源

2013-09-22 17:35:08 jshthornton

這個想法不是在移動設備上增加更多開銷。 requirejs = 84.6k不是很多js文件甚至是那麼大的一半。 – CelticParser

@CelticParser總會有更多的開銷，因爲實施的解決方案將有一個大小......因此開銷。如果定製邏輯或enquire.js的額外開銷大於頁面中所有腳本已經保存的開銷，那麼您必須權衡一下。 – jshthornton

我寧願有條件地加載（和做）幾行JavaScript，幾百字節的內容幾乎超過Meg。 ESP。當涉及到移動用戶的UX時。 – CelticParser

重量輕，無處不在開銷。

if (document.documentElement.clientWidth < 900) { // scripts }

來源

使用媒體查詢只在移動設備上包含JS文件

回答

相關問題