javascript - элементов - ширина окна браузера jquery




Получить размер экрана, текущей веб-страницы и окна браузера (12)

вот мое решение!

// innerWidth
const screen_viewport_inner = () => {
    let w = window,
        i = `inner`;
    if (!(`innerWidth` in window)) {
        i = `client`;
        w = document.documentElement || document.body;
    }
    return {
        width: w[`${i}Width`],
        height: w[`${i}Height`]
    }
};


// outerWidth
const screen_viewport_outer = () => {
    let w = window,
        o = `outer`;
    if (!(`outerWidth` in window)) {
        o = `client`;
        w = document.documentElement || document.body;
    }
    return {
        width: w[`${o}Width`],
        height: w[`${o}Height`]
    }
};

// style
const console_color = `
    color: rgba(0,255,0,0.7);
    font-size: 1.5rem;
    border: 1px solid red;
`;



// testing
const test = () => {
    let i_obj = screen_viewport_inner();
    console.log(`%c screen_viewport_inner = \n`, console_color, JSON.stringify(i_obj, null, 4));
    let o_obj = screen_viewport_outer();
    console.log(`%c screen_viewport_outer = \n`, console_color, JSON.stringify(o_obj, null, 4));
};

// IIFE
(() => {
    test();
})();

Как я могу получить windowWidth , windowHeight , pageWidth , pageHeight , screenWidth , screenHeight , pageX , pageY , screenX , screenY которые будут работать во всех основных браузерах?


В некоторых случаях, связанных с отзывчивым макетом $(document).height() может возвращать неверные данные, отображающие только высоту порта просмотра. Например, когда какая-то оболочка div # имеет высоту: 100%, этот #wrapper может быть растянут каким-то блоком внутри него. Но высота по-прежнему будет напоминать высоту видового экрана. В такой ситуации вы можете использовать

$('#wrapper').get(0).scrollHeight

Это представляет собой фактический размер обертки.


Вот мое решение. Сначала идет какой-то служебный объект для работы с файлом cookie

/* Simple getter and setter for cookies */
(function(global){
    function setCookie(cname, cvalue, exdays) {
        exdays = typeof exdays === 'undefined' && 365;

        var d = new Date();
        d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
        var expires = "expires="+d.toUTCString();
        document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
    }

    function getCookie(cname) {
        var name = cname + "=";
        var ca = document.cookie.split(';');
        for(var i = 0; i < ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) == ' ') {
                c = c.substring(1);
            }
            if (c.indexOf(name) == 0) {
                return c.substring(name.length, c.length);
            }
        }
        return undefined;
    }

    global.Cookie = {
        get: getCookie,
        set: setCookie
    };
})(window);

Тогда вы можете сделать что-то вроде ..

/* 
  Detect screen width and height and save it to a cookie.
  We are later using it to resize the images accordingly.
*/
if(
    !Cookie.get('screen_width') ||
    !Cookie.get('screen_height') ||
    Cookie.get('screen_width') != screen.width ||
    Cookie.get('screen_height') != screen.height
  ){
  Cookie.set('screen_width', screen.width);
  Cookie.set('screen_height', screen.height);
  location.reload();
}

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


Вы можете использовать объект Screen чтобы получить это.

Ниже приведен пример того, что он будет возвращать:

Screen {
    availWidth: 1920,
    availHeight: 1040,
    width: 1920,
    height: 1080,
    colorDepth: 24,
    pixelDepth: 24,
    top: 414,
    left: 1920,
    availTop: 414,
    availLeft: 1920
}

Чтобы получить переменную screenWidth , просто используйте screen.width , то же самое с screenHeight , вы просто используете screen.height .

Чтобы получить ширину и высоту окна, это будет screen.availWidth или screen.availHeight соответственно.

Для переменных pageX и pageY используйте window.screenX or Y Обратите внимание, что это от ОЧЕНЬ ЛЕВЫЙ / ТОП ВАШЕГО ЛЕВЫЙ / ТОП-ЭКСПОРТ . Поэтому, если у вас есть два экрана шириной 1920 тогда окно размером 500 пикселей слева от правого экрана будет иметь значение X 2420 (1920 + 500). screen.width/height , однако, отображает ширину или высоту экрана CURRENT.

Чтобы получить ширину и высоту вашей страницы, используйте jQuery $(window).height() или $(window).width() .

Снова используя jQuery, используйте $("html").offset().top и $("html").offset().left pageX $("html").offset().left pageX для ваших pageX и pageY .


Если вам нужна действительно пуленепробиваемое решение для ширины и высоты документа ( pageWidth и pageHeight на картинке), вам может jQuery.documentSize использовать плагин jQuery.documentSize , jQuery.documentSize .

У него есть только одна цель: всегда возвращать правильный размер документа даже в сценариях, когда jQuery и другие методы fail . Несмотря на свое название, вам необязательно использовать jQuery - он написан на ванильном Javascript и работает без jQuery .

Использование:

var w = $.documentWidth(),
    h = $.documentHeight();

для глобального document . Для других документов, например, во встроенном iframe, к которому вы имеете доступ, передайте документ в качестве параметра:

var w = $.documentWidth( myIframe.contentDocument ),
    h = $.documentHeight( myIframe.contentDocument );

Обновление: теперь для размеров окна тоже

Начиная с версии 1.1.0, jQuery.documentSize также обрабатывает размеры окна.

Это необходимо, потому что

jQuery.documentSize предоставляет $.windowWidth() и $.windowHeight() , которые решают эти проблемы. Для получения дополнительной информации ознакомьтесь с документацией .


Если вы используете jQuery, вы можете получить размер окна или документа с помощью методов jQuery:

$(window).height();   // returns height of browser viewport
$(document).height(); // returns height of HTML document (same as pageHeight in screenshot)
$(window).width();   // returns width of browser viewport
$(document).width(); // returns width of HTML document (same as pageWidth in screenshot)

Для размера экрана вы можете использовать screen объект следующим образом:

screen.height;
screen.width;

Не-jQuery способ получить доступный размер экрана. window.screen.width/height уже выставлен, но для отзывчивого веб-дизайна и полноты я считаю, что стоит упомянуть эти атрибуты:

alert(window.screen.availWidth);
alert(window.screen.availHeight);

http://www.quirksmode.org/dom/w3c_cssom.html#t10 :

availWidth и availHeight - доступная ширина и высота на экране (исключая панели задач OS и т. д.).


Но когда мы говорим о чувствительных экранах, и если мы по какой-то причине хотим обработать его с помощью jQuery,

window.innerWidth, window.innerHeight

дает правильное измерение. Даже он удаляет лишнее пространство прокрутки, и нам не нужно беспокоиться о настройке этого пространства :)


Чтобы проверить высоту и ширину текущей загруженной страницы любого веб-сайта с помощью «консоли» или после нажатия «Осмотреть» .

Шаг 1 : Нажмите правую кнопку мыши и нажмите «Осмотреть», а затем нажмите «Консоль».

Шаг 2. Убедитесь, что экран вашего браузера не находится в режиме максимизации. Если экран браузера находится в режиме максимизации, вам нужно сначала нажать кнопку максимизации (присутствовать либо в правом или левом верхнем углу), либо не максимизировать ее.

Шаг 3 : Теперь напишите следующее после знака ('>'), т.е.

       > window.innerWidth
            output : your present window width in px (say 749)

       > window.innerHeight
            output : your present window height in px (say 359)


Я разработал библиотеку, чтобы узнать реальный размер видового экрана для настольных компьютеров и мобильных браузеров, поскольку размеры видовых экранов являются несогласованными между устройствами и не могут полагаться на все ответы этого сообщения (согласно всем исследованиям, которые я сделал об этом): https://github.com/pyrsmk/W


function wndsize(){
  var w = 0;var h = 0;
  //IE
  if(!window.innerWidth){
    if(!(document.documentElement.clientWidth == 0)){
      //strict mode
      w = document.documentElement.clientWidth;h = document.documentElement.clientHeight;
    } else{
      //quirks mode
      w = document.body.clientWidth;h = document.body.clientHeight;
    }
  } else {
    //w3c
    w = window.innerWidth;h = window.innerHeight;
  }
  return {width:w,height:h};
}
function wndcent(){
  var hWnd = (arguments[0] != null) ? arguments[0] : {width:0,height:0};
  var _x = 0;var _y = 0;var offsetX = 0;var offsetY = 0;
  //IE
  if(!window.pageYOffset){
    //strict mode
    if(!(document.documentElement.scrollTop == 0)){offsetY = document.documentElement.scrollTop;offsetX = document.documentElement.scrollLeft;}
    //quirks mode
    else{offsetY = document.body.scrollTop;offsetX = document.body.scrollLeft;}}
    //w3c
    else{offsetX = window.pageXOffset;offsetY = window.pageYOffset;}_x = ((wndsize().width-hWnd.width)/2)+offsetX;_y = ((wndsize().height-hWnd.height)/2)+offsetY;
    return{x:_x,y:_y};
}
var center = wndcent({width:350,height:350});
document.write(center.x+';<br>');
document.write(center.y+';<br>');
document.write('<DIV align="center" id="rich_ad" style="Z-INDEX: 10; left:'+center.x+'px;WIDTH: 350px; POSITION: absolute; TOP: '+center.y+'px; HEIGHT: 350px"><!--К сожалению, у Вас не установлен flash плеер.--></div>');




cross-browser