媒體查詢JavaScript也在瀏覽器上工作

我正在嘗試一些JavaScript和媒體查詢。我想用javascript來改變一些元素，比如開關元素等。媒體查詢JavaScript也在瀏覽器上工作

當瀏覽器/設備寬度是320px時，我想做點什麼。

我想出了以下，但這不起作用：

if (screen.width < 320){ 
    $('input[type="text"]').insertAfter('label'); 
    $('input[type="text"]').eq(1).remove(); 
    $('input[type="text"]').eq(2).remove();    
}

什麼我錯了？

當我想爲我的CSS的一些變化做到這一點，它看起來像這樣：

@media only screen and (max-width : 400px) { }

和上面我想轉換爲JavaScript的例子..

希望有人能幫助我out

來源

2013-03-28 Caspert

是的。您可以使用$(window).width()。

if ($(window).width() < 320) {  
    $('input[type="text"]').insertAfter('label'); 
    $('input[type="text"]').eq(1).remove(); 
    $('input[type="text"]').eq(2).remove(); 
}

另外，如果你想檢查是否調整大小發生了不清爽，使用$(window).resize()。

下面是使用調整大小的示例jsFiddle。

來源

2013-03-28 09:48:03 lifetimes

對不起，它不適用於我:(我試過上面的例子，但我沒有得到一個警告，我已經在你的2個例子中設置...我錯了什麼？ – Caspert 2013-03-28 09:58:11

@Caspert你怎麼樣檢查它？你有console.logged的寬度是什麼？爲什麼你不能只使用媒體屏幕和（max-width：320px）{} – lifetimes 2013-03-28 10:00:47

是的我試過了，但我認爲我做錯了：'console .log（window.width）;'它不能用css工作的原因是因爲我想替換一個元素中的一些文本，並且還要切換一些對象... – Caspert 2013-03-28 10:05:03

請參考以下網址：

Phonegap - reliable page width detection?

您可以使用Navigator對象檢測jQuery的設備。

來源

2013-03-28 09:56:24 web2008

你可以調用JavaScript的內部

fiddle

function resize() { 
    if (window.matchMedia('only screen and (max-width: 400px)').matches) { 
     document.body.style.background = 'red';     
    } else if (window.matchMedia('only screen and (min-width: 401px) and ' + 
           '(max-width: 600px)').matches) { 
     document.body.style.background = 'blue'; 
    } else { 
     document.body.style.background = 'yellow';    
    } 
} 

window.addEventListener('resize', resize, false); 
resize();

來源

2013-03-28 09:59:03 Venugopal

是的，你可以將媒體查詢。雖然媒體查詢對於CSS有用，但有時我們需要根據設備大小加載js。

Media Match由Paul Irish撰寫是一個很好的工具。它被用於Modernizr一個特徵檢測庫。

來源

2013-03-28 09:59:23

媒體查詢JavaScript也在瀏覽器上工作

回答

相關問題