Как узнать размер окна браузера

Определение ширины окна браузера

В определенных ситуациях знать ширину окна браузера (т.е. вкладки) «жизненно» необходимо, иначе выполнение поставленной задачи может затрудниться. Это суждение применимо к разработке и дизайну веб сайтов и веб приложений. В этом посте рассмотрим простые способы проверки размера окна браузера.

Google Chrome: Меняем ширину окна

Гугл Хром — самый популярный обозреватель в мире насчитывающий десятки миллионов пользователей. Большое кол-во дополнений, инструкций и руководств включая это. Давайте разберемся как узнать «width» вкладки браузера в пикселях.

  1. Открываем нужную веб страницу, жмем правой кнопкой мыши на белом фоне экрана (где нет веб элементов — меню, рисунков и пр.).
  2. В контекстном меню которое появилось нужно выбрать «Посмотреть код». Не стоит бояться, мы ничего не будим разрабатывать, это обычное название панели инструментов.
  3. Далее откроется панель разработчика. Немного ее подкорректируем и переместим вниз. Так удобно будит с ней работать.

Теперь работаем с двумя способами:

Размер окна и масштаб внутри окна браузера.

  • Перетягивать границу окна. Нажимаем в правом верхнем углу иконку «Свернуть в окно». Теперь передвигаем мышкой правую или левую границу. При этом, разрешение в пикселях будит отображаться также в верхней части браузера. Очень удобный режим.
  • Перейди в адаптивный режим просмотра страницы. Это специальный режим позволит без труда посмотреть как будит страница (сайт) отображаться с разных мобильных устройств (телефон, планшет). В этом режиме также есть встроенные профили. Можете попробовать каждый.
  • Задать нужную ширину вручную. Можно прямо вписать сколько пикселей и сделать как должно быть по ширине (высоту тоже можно указать) окна (вкладки).

Яндекс Браузер: Как узнать размер окна

Яндекс.Браузер — пожалуй самый популярный браузер отечественного производства. У него также есть возможность определить (и конечно настроить) размер веб сайта. Делается это аналогично Хрому.

  1. Открываем панель разработчика. Кликаем правой кнопкой на пустой области страницы (где нет текста, картинок и пр) и выбираем самый нижний пункт открывшегося контекстного меню.
  2. Замеряем расширение. Либо переходим в мобильный режим (слева внизу иконка мобильника), либо тянем за границу и смотрим (таким образом определяем) текущую ширину.
Как восстановить закрытое окно в Яндексе

Другие браузеры

В остальных браузерах можно получить ширину (измерить) аналогичным способом. Например вы пользуйтесь Оперой или Мазила Фаерфокс — также кликаем правой кнопкой мыши, выбираем самый нижний пункт (смотреть код или что-то подобное). Теперь размер в пикселях будет показываться в верхнем правом углу при перетягивании границы.

Онлайн сервисы

Если вы не поймете как посмотреть (изменить) ширину окна в браузере своими руками, то можно воспользоваться онлайн сервисами. Вот пара ссылок — этот или этот, они показывают реальный размер активной вкладки в пикселях (px).

Как определить размеры элементов сайта в браузере

Источник

Определить размер окна браузера

Разрешение экрана — это количество пикселей, приходящихся на единицу площади. Например, разрешение экрана составляет 1024Х768. В данном случае ширина экрана будет равна 1024 пикселей, высота 768 пикселей. Заметим, что определение «разрешения экрана» следует отличать от определения «размер окна браузера». Так,если размер окна браузера уменьшен вручную, то при просмотре какого-то сайта можно развернуть браузер на весь экран. Зачем нужно знать размер окна браузера. Например, нам нужно, чтобы блок полностью закрывал все окно браузера, либо создать резиновый дизайн.

Источник

Get the size of the screen, current web page and browser window

How can I get windowWidth , windowHeight , pageWidth , pageHeight , screenWidth , screenHeight , pageX , pageY , screenX , screenY which will work in all major browsers?

screenshot describing which values are wanted

20 Answers 20

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Как указать почту в госуслугах электронную

Switch to Trending sort

You can get the size of the window or document with jQuery:

For screen size you can use the screen object:

The jQuery method height() seems to work for all elements, and returns a number ( 46 ) rather than a string like css(‘height’) ( «46px» ).

When dealing with mobile Safari, sadly jQuery isn’t a perfect solution to this question. See the note on line #13 at github.com/jquery/jquery/blob/master/src/dimensions.js

This has everything you need to know: Get viewport/window size

Please stop editing this answer. It’s been edited 22 times now by different people to match their code format preference. It’s also been pointed out that this isn’t required if you only want to target modern browsers — if so you only need the following:

Here is a cross browser solution with pure JavaScript (Source):

A non-jQuery way to get the available screen dimension. window.screen.width/height has already been put up, but for responsive webdesign and completeness sake I think its worth to mention those attributes:

availWidth and availHeight — The available width and height on the screen (excluding OS taskbars and such).

But when we talk about responsive screens and if we want to handle it using jQuery for some reason,

gives the correct measurement. Even it removes the scroll-bar’s extra space and we don’t need to worry about adjusting that space 🙂

Full 2020

I am surprised that question have about 10 years and it looks like so far nobody has given a full answer (with 10 values) yet. So I carefully analyse OP question (especially picture) and have some remarks

  • center of coordinate system (0,0) is in the viewport (browser window without bars and main borders) top left corner and axes are directed to right and down (what was marked on OP picture) so the values of pageX, pageY, screenX, screenY must be negative (or zero if page is small or not scrolled)
  • for screenHeight/Width OP wants to count screen height/width including system menu bar (eg. in MacOs) — this is why we NOT use .availWidth/Height (which not count it)
  • for windowWidth/Height OP don’t want to count size of scroll bars so we use .clientWidth/Height
  • the screenY — in below solution we add to position of top left browser corner ( window.screenY ) the height of its menu/tabls/url bar). But it is difficult to calculate that value if download-bottom bar appears in browser and/or if developer console is open on page bottom — in that case this value will be increased of size of that bar/console height in below solution. Probably it is impossible to read value of bar/console height to make correction (without some trick like asking user to close that bar/console before measurements. )
  • pageWidth — in case when pageWidth is smaller than windowWidth we need to manually calculate size of children elements to get this value (we do example calculation in contentWidth in below solution — but in general this can be difficult for that case)
  • for simplicity I assume that margin=0 — if not then you should consider this values when calculate pageWidth/Height and pageX/Y
Как зарегистрировать карту порядок на сайте порядок

I test it on Chrome 83.0, Safari 13.1, Firefox 77.0 and Edge 83.0 on MacOs High Sierra

Thanks for the modern answer. I hope it gets voted further up towards the top of the page. Quick question, how do you rerun function when window is resized?

Graphical version of the answer

Graphical answer: (. )

You can also get the WINDOW width and height, avoiding browser toolbars and other stuff. It is the real usable area in browser’s window.

To do this, use: window.innerWidth and window.innerHeight properties (see doc at w3schools).

In most cases it will be the best way, in example, to display a perfectly centred floating modal dialog. It allows you to calculate positions on window, no matter which resolution orientation or window size is using the browser.

To check height and width of your current loaded page of any website using «console» or after clicking «Inspect».

step 1: Click the right button of mouse and click on ‘Inspect’ and then click ‘console’

step 2: Make sure that your browser screen should be not in ‘maximize’ mode. If the browser screen is in ‘maximize’ mode, you need to first click the maximize button (present either at right or left top corner) and un-maximize it.

step 3: Now, write the following after the greater than sign (‘>’) i.e.

Complete guide related to Screen sizes

JavaScript

For height:

Note: When the window is maximized this will equal screen.availHeight

For width:

Jquery

For height:

For width:

for the global document . For other documents, e.g. in an embedded iframe you have access to, pass the document as a parameter:

Яндекс браузер масштаб страницы

Update: now for window dimensions, too

That is necessary because

  • $( window ).height() is buggy in iOS, to the point of being useless
  • $( window ).width() and $( window ).height() are unreliable on mobile because they don’t handle the effects of mobile zooming.

With the introduction of globalThis in ES2020 you can use properties like.

For screen size:

For Window Size

For Offset:

Here you find information how to use a bookmarklet https://en.wikipedia.org/wiki/Bookmarklet

Bookmarklet

Original Code

The original code is in coffee:

Basically the code is prepending a small div which updates when you resize your window.

In some cases related with responsive layout $(document).height() can return wrong data that displays view port height only. For example when some div#wrapper has height:100%, that #wrapper can be stretched by some block inside it. But it’s height still will be like viewport height. In such situation you might use

That represents actual size of wrapper.

I developed a library for knowing the real viewport size for desktops and mobiles browsers, because viewport sizes are inconsistents across devices and cannot rely on all the answers of that post (according to all the research I made about this) : https://github.com/pyrsmk/W

Sometimes you need to see the width/height changes while resizing the window and inner content.

It adds a valid HTML with fixed position and high z-index, but is small enough, so you can:

  • use it on an actual site
  • use it for testing mobile/responsive views

Tested on: Chrome 40, IE11, but it is highly possible to work on other/older browsers too . 🙂

Очистить историю просмотров в компьютере Яндексе как

EDIT: Now styles are applied only to logger table element — not to all tables — also this is a jQuery-free solution 🙂

You can use the Screen object to get this.

The following is an example of what it would return:

To get your screenWidth variable, just use screen.width , same with screenHeight , you would just use screen.height .

To get your window width and height, it would be screen.availWidth or screen.availHeight respectively.

For the pageX and pageY variables, use window.screenX or Y . Note that this is from the VERY LEFT/TOP OF YOUR LEFT/TOP-est SCREEN. So if you have two screens of width 1920 then a window 500px from the left of the right screen would have an X value of 2420 (1920+500). screen.width/height , however, display the CURRENT screen’s width or height.

To get the width and height of your page, use jQuery’s $(window).height() or $(window).width() .

Again using jQuery, use $(«html»).offset().top and $(«html»).offset().left for your pageX and pageY values.

Источник
Рейтинг
Загрузка ...