Javascript移動設備寬度檢查和類刪除

如果設備寬度低於1200像素（由於移動視圖），我需要從我的網站刪除一些類。Javascript移動設備寬度檢查和類刪除

我試圖使用JavaScript，這種方法工作得很好：

$(window).resize(function(){ 
var current_width = $(window).width(); 
if(current_width < 1200) 
    $('a').removeClass("expand"); 
    $(".effects clearfix").remove(); 
    $(".overlay").remove(); 
    $('#removeimg').removeClass('img').addClass('imgmobile');});

但問題是，這隻有當我調整窗口的大小。因此，如果我使用我的智能手機（Android 4.3，Chrome）打開該網站，該腳本不起作用。

我試着寫這個代碼，但我失敗了：

function checkWidth() { 
var width = (window.innerWidth > 0) ? window.innerWidth : screen.width; 
    if (window.innerWidth < 1200) { 
     $('#removeimg').removeClass('img').addClass('imgmobile');  
    } 
    if (window.innerWidth < 1200) { 
     $(".effects clearfix").remove();  
    } 
    if (window.innerWidth < 1200) { 
     $(".overlay").remove();  
    } 
    if (window.innerWidth < 1200) { 
     $('a').removeClass("expand"); 
    }

我如何檢查設備寬度和下1200像素設置這些課程？（我還試圖修改/設置初始值/與媒體查詢的CSS但不幸的是我還需要刪除類:(）

謝謝你的任何想法。

來源

2015-06-13 LorianaK

很可能你的功能永遠不會被調用。你需要一個事件來觸發它，這可以是document.ready。調整大小會觸發，因爲每次調整瀏覽器大小時都會觸發該功能。 – byrdr

嘗試在一個jQuery包裹的窗口元素。這應該爲你工作，你還需要一個事件來觸發該功能。

$(document).ready(function(){ 
    if ($(window).innerWidth() < 1200) { 
      $('#removeimg').removeClass('img').addClass('imgmobile');  
     } 
});

來源

2015-06-13 23:32:41 byrdr

謝謝，這段代碼運行良好，但它似乎像Android Chrome仍然忽略JavaScript代碼或什麼的。我的問題是帶鏈接的img元素，有些類不允許在移動瀏覽器上點擊它。如果我手動刪除這些類img鏈接運作良好。但我需要爲非移動設備保留它們，這就是爲什麼我認爲如果我用移動瀏覽器的javascript刪除它，它會沒事的。 :(也許我應該放棄所有課程（他們製作了一個動畫img懸停效果，在移動設備上導致問題） – LorianaK

你已經把代碼中的調整功能，這是它的唯一工作窗口的大小調整。在準備函數調用一次在並且一次也調整大小。

來源

2015-06-13 23:33:27

另一種解決方案可能是使用單獨的類，並在CSS中的媒體查詢中使用display: show和display: hide。

這適用於各種移動平臺，但您可能必須執行多個媒體查詢。我希望這有幫助。

來源

2015-06-13 23:48:08 Csteele5

謝謝，我已經嘗試過這種方式，但我發現我需要徹底刪除課程。 – LorianaK

Javascript移動設備寬度檢查和類刪除

回答

相關問題