Запросы в средствах массовой информации плюс окно javascript изменяют размер по ширине

Question

Я использую некоторый javascript для обнаружения изменений ширины, пока медиа-запросы. Мне нужны оба, поскольку мне нужно переместить html. Обе работы, кроме времени, когда они происходят, не совпадают, я предполагаю, что полоса прокрутки включена в одну из них, но было бы глупо предположить полосу прокрутки 15 пикселей, так как ее ширина не одинакова в браузерах. Есть ли лучший подход?

Мой медиа-запрос активирует так:

<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); 
}); 

Спасибо!

Answer 1

Используя сценарий, найденный в 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); 
});