媒體查詢加上JavaScript窗口調整不同寬度

我使用一些JavaScript來檢測寬度更改，只要媒體查詢。我需要兩者，因爲我需要移動HTML。兩者都可以工作，除了它們發生的時間不一樣，我猜測滾動條被包含在其中一箇中，但假設一個15px的滾動條是愚蠢的，因爲它的寬度在瀏覽器中不一樣。有更好的方法嗎？媒體查詢加上JavaScript窗口調整不同寬度

我的媒體查詢激活這樣的：

<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 767px)" />

而且使用：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

雖然我的JS是這樣的：

var delay = (function(){ 
    var timer = 0; 
    return function(callback, ms){ 
     clearTimeout (timer); 
     timer = setTimeout(callback, ms); 
    }; 
})(); 

var pause = 100; 
$(window).resize(function() { 
    delay(function() { 
     var width = $(window).width(); 
      if (width >= 768) { 
      if (window.myDevice != 'desktop' || window.myDevice === undefined) { 
       window.myDevice = 'desktop'; 
       $('#head').prepend($('#branding')); 
      } 
     } else if (width <= 767) { 
      if (window.myDevice != 'mobile' || window.myDevice === undefined) { 
       window.myDevice = 'mobile'; 
       $('#content').prepend($('#branding')); 
      } 
     } 
    }, pause); 
});

謝謝！

來源

2013-10-25 veksen

滾動條_are_相同跨瀏覽器，他們是跨操作系統只是不同而已。即使如此，他們往往有點像寬度一樣。即使視覺寬度看起來不那麼寬，物理寬度也是如此。 –

它總是延遲，或者只是第一個窗口調整大小？我的猜測是延遲是瀏覽器下載樣式表文件所需的時間。 –

當然，您在媒體查詢中使用術語「設備寬度」，因此它與Jquery上的「寬度」非常不同。 – DaniP

使用在http://andylangton.co.uk/blog/development/get-viewport-size-width-and-height-javascript找到的腳本，我已經解決了這個問題。

新增功能

function viewport() { 
    var e = window, a = 'inner'; 
    if (!('innerWidth' in window)) { 
     a = 'client'; 
     e = document.documentElement || document.body; 
    } 
    return { width : e[ a+'Width' ] , height : e[ a+'Height' ] }; 
}

，然後引用使用viewport().width寬度我(window).resize()裏面像這樣：

$(window).resize(function() { 
    delay(function() { 
     var width = $(window).width(); 
      if (width >= 768) { 
      if (window.myDevice != 'desktop' || window.myDevice === undefined) { 
       window.myDevice = 'desktop'; 
       $('#head').prepend($('#branding')); 
      } 
     } else if (width <= 767) { 
      if (window.myDevice != 'mobile' || window.myDevice === undefined) { 
       window.myDevice = 'mobile'; 
       $('#content').prepend($('#branding')); 
      } 
     } 
    }, pause); 
});

來源

2013-10-25 19:44:41 veksen

媒體查詢加上JavaScript窗口調整不同寬度

回答

相關問題