определить ширину окна и компенсировать полосы прокрутки - Javascript

Как определить ширину окна пользователя с помощью Javascript и учесть их полосу прокрутки? (Мне нужна ширина экрана ВНУТРИ полосы прокрутки). Вот что у меня есть... кажется, работает в нескольких браузерах... за исключением того, что полосы прокрутки не учитываются...

    function browserWidth() {
  var myWidth = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
  } else if( document.documentElement && document.documentElement.clientWidth ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
  } else if( document.body && document.body.clientWidth ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
  }
  return myWidth;
}

Любые идеи? мне нужно, чтобы он работал во всех браузерах;)


javascript screen width
person johnnietheblack    schedule 27.02.2009    source источник
comment
См. также stackoverflow.com/q/8339377/1136253.   -  person tubefavorites.com    schedule 02.08.2016

Ответы (7)


arrow_upward
5
arrow_downward

Подробную информацию о том, какие свойства поддерживаются в каких браузерах, вы найдете на этой странице сайта quirksmode.org.

Лучше всего, вероятно, захватить элемент на странице (используя document.body, где это поддерживается, или document.getElementById или что-то еще), пройтись по его цепочке offsetParent, чтобы найти самый верхний элемент, а затем проверить clientWidth и clientHeight этого элемента.

person moonshadow    schedule 27.02.2009
comment
Этот ответ неверен, так как он не будет работать, если для самого верхнего элемента установлен размер, отличный от размера окна, например, если в теле есть контент, растягивающий его за пределы 100% (как и на большинстве страниц). - person Lior; 04.02.2014

arrow_upward
7
arrow_downward

Обходной путь (заметно неприятный), если вас интересует только ширина, — создать div размером 1px x 100% и использовать его offsetWidth. Работает в IE>=7, FF, Chrome, Safari и Opera (я не пробовал IE6, так как мы работаем над тем, чтобы вам повезло, что он вообще работает, так что не жалуйтесь о политике странностей рендеринга в наши дни). Я вывешиваю div из document.body с атрибутами { position: 'absolute', top: '-1px', left: 0, width: '100%', height: '1px' }, создавая его в первый раз, когда это необходимо.

Работает, если вы можете это переварить.

person Pete Jordan    schedule 13.12.2010

arrow_upward
3
arrow_downward

Просто добавьте это перед проверкой window.innerWidth():

if (typeof(document.body.clientWidth) == 'number') {
    // newest gen browsers
    width = document.body.clientWidth;
    height = document.body.clientHeight;
}
person mst    schedule 04.08.2011
comment
Если ширина тела больше окна (т. е. присутствует горизонтальная полоса прокрутки), это даст ширину body, а не окна. - person Himanshu P; 12.11.2013

arrow_upward
3
arrow_downward

Это то, что я сделал - всего полгода в изучении JavaScript, так что это может быть плохим решением. Сначала я создал прозрачное квадратное изображение (10px x 10px), но вы также можете создать непрозрачное изображение и добавить его в свой JavaScript как
document.getElementById('getDimensions').style.visibility = "hidden";

HTML:

<img id="getDimensions" src="images/aSmallBox.png" alt="A small transparent image  
meant to determine the dimensions of the viewport" width="10px" height="10px"/>

JavaScript:

//Inside function called by window.onload event handler (could go in CSS file, but   
//better to keep it with other related code in JS file)
document.getElementById('getDimensions').style.position = "fixed";
document.getElementById('getDimensions').style.bottom = "0px";
document.getElementById('getDimensions').style.right = "0px";   

//Everything below inside function called by window.onresize event handler
var baseWidthCalculation = document.getElementById('getDimensions').offsetLeft;
var baseHeightCalculation = document.getElementById('getDimensions').offsetTop;
  //Account for the dimensions of the square img element (10x10)
var viewportWidth = baseWidthCalculation + 10;
var viewportHeight = baseHeightCalculation + 10;
person Tim Salai    schedule 17.02.2012
comment
Это на самом деле не плохая идея - person Gricey; 08.10.2012

arrow_upward
3
arrow_downward

Это более эффективная версия идеи, опубликованной здесь Тимом Салаи (хотя вы только начинаете, было блестяще поместить элемент вот так в правом нижнем углу).

var getDimensions = document.createElement("div");
getDimensions.setAttribute("style", 
            "visibility:hidden;position:fixed;bottom:0px;right:0px;");
document.getElementsByTagName("body")[0].appendChild(getDimensions);
var viewportWidth = getDimensions.offsetLeft;
var viewportHeight = getDimensions.offsetTop;

А вот и модульная версия

var PageDimensions = function(){
 var Width;
 var Height;     

 function pagedimensionsCtor (){
   var getDimensions = document.createElement("div");
   getDimensions.setAttribute("style" , 
         "visibility:hidden;position:fixed;bottom:0px;right:0px;");
   document.getElementsByTagName("body")[0].appendChild(getDimensions);
   Width = getDimensions.offsetLeft;
   Height = getDimensions.offsetTop;
   getDimensions.parentNode.removeChild(getDimensions);
 }
 pagedimensionsCtor();

 function Reset(){
  pagedimensionsCtor();
 }     

 function GetPageHeight(){
  return Height;
 }

 function GetPageWidth(){
  return Width;
 }

 return{
  Reset: Reset,
  GetPageHeight: GetPageHeight,
  GetPageWidth: GetPageWidth
 };
}

Используйте модульную версию:

var page = new PageDimensions();
console.log("viewportWidth: " + page.GetPageWidth() + " viewportHeight: " + page.GetPageHeight());

Бонусная функция:

page.Reset();//just in case you think your dimensions have changed
person Travis J    schedule 11.11.2012
comment
Я думаю, вам действительно нужно вернуть Height и Width вместо Height() и Width() в ваших функциях GetPageHeight и GetPageWidth. Кроме того, в вашем примере использования есть GetWidth() и GetHeight(), которые должны быть GetPageWidth() и GetPageHeight()`. - person cjbarth; 18.01.2013
comment
Причина, по которой я сказал о возврате, заключается в том, что я попробовал код по-вашему, и он не сработал. После того, как я изменил Height() и Width() на Height и Width, все заработало. (Глупый я, однако, я изменил размер моей главной страницы DIV и забыл, что у меня есть граница на моей DIV, поэтому мне пришлось сделать некоторые дополнительные вычисления для этого.) - person cjbarth; 18.01.2013

arrow_upward
0
arrow_downward

Я бы сравнил "innerWidth" с шириной тела. Если ширина тела > внутренней ширины, полосы прокрутки присутствуют.

if (browserWidth() < document.body.offsetWidth) {
  doSomething();
}
person TJ L    schedule 27.02.2009
comment
хм, круто... наверное, я не знаю, ЧТО делать, когда выясню, присутствуют ли полосы прокрутки... поскольку браузеры имеют полосы прокрутки разного размера... идеи? - person johnnietheblack; 27.02.2009
comment
@johnintheblack: Обратите внимание, что в Windows изменение темы Windows приводит к изменению ширины полосы прокрутки, поэтому это необходимо учитывать при тестировании. Например, ширина темы по умолчанию для Vista на 8 пикселей больше, чем у темы по умолчанию для XP. - person diadem; 20.02.2010

arrow_upward
0
arrow_downward

Еще одно решение, которое вы можете попробовать, — изменить CSS, чтобы прокрутка происходила внутри вашей страницы, а не в окне браузера. В стиле body добавьте overflow:auto. Теперь элемент body включает полосу прокрутки, поэтому, когда вы получаете ширину окна, вы измеряете ширину вне контейнера прокрутки, а не внутри него.

Это кажется потенциальным источником причудливости и, возможно, проблемой доступности, поэтому, если вы собираетесь широко использовать, вы можете тщательно протестировать его.

person Dylan McCall    schedule 21.12.2011