Screen Resolution ≠ Browser Window

Take the pain out of building site search with the Algolia hosted API. Start free now!

When I tweeted this and then followed up with this, I got comments like this. That comment has a perfectly valid point.

We often talk about screen resolution, which is not the relevant statistic when thinking about what space our website’s visitors have available. The relevant statistic is browser window size. So why do we talk about screen resolution so much? Well probably because in the most popular analytics software in the world, Google Analytics, it’s the only data you get.

(The Google Analytics team is aware of this)

And so, what are we to do? Well, start measuring browser size, for one.

But first, a word.

What if we figured out all kinds of data about our visitors browser sizes. What is to be done with this data once we have it? If @beep has taught us anything, it’s that we can and should accomodate to browsers of any shape and size.

But still, having information is never a bad thing. Smarter men and women than me may see things I do not and think of reasonable actions to take based on this data.

Getting the Data

Since Google Analytics can’t currently help us, we’ll need to run some JavaScript on the page ourselves to get the data. jQuery makes it easy to measure sizes as well as make and Ajax call to POST the data to a script that can save it:

Now we just need that script savedata.php to be ready to accept and save that data. First we need a database, so here’s a simple structure for one:

I’m no MYSQL expert, but this is what exporting the structure from phpMyAdmin gave me:

And now my wicked primitive script for saving the POSTs:

That’s what I did on CSS-Tricks for one day. If you’d like, here’s the complete data I collected as SQL.

Looking At The Results

Remember: ALL of this data was collected from css-tricks.com. So it’s a bunch of designer nerds, probably. It’s only relevant to this site and sites with very similar audiences.

First, the borin’ ol screen resolution data. I got this by querying 500 random samples of data and laying div’s of that size on top of each other with as light of gray as I could make. Incidently, its rgba(0,0,0,0.004) , because rgba(0,0,0,0.003) is pure white (weird).

Notice the rather hard lines. Monitors only come in so many sizes. Makes sense. Here’s what happens when we do the same thing with browser window sizes though:

Much more blurry. Also makes sense. Even as I write this my browser is at some very arbitrary sizing, probably about 80% of my screen resolution. Click those images above to see them bigger. You’ll notice that whatever visible hard edges there are in the browser size version, they are exactly 20px narrower than the screen size counterpart. Interesting.

If I tint the screen sizes red and the browser sizes green and put them on top of each other, this is what we get:

Notice on the outside edges the tint stays red. Not a lot of people who have extremely wide monitors have their browser window open that wide. I know I don’t. Let’s look at the stats for “full screen” browsers. How many people browser full screen, or with their browser window “maximized” so to speak. Well if you query only for entries where the window and the screen resolution are exactly the same, very few, less than 1%, but it get’s interesting:

Totally full screen	0.85%
Within 50px of full screen	1.06%
Within 100px of full screen	9.67%
Within 200px of full screen	61.18%

So very few people browse full screen, but the majority of people browse pretty close to full screen. As speculation, it’s likely the Windows folks are the ones browsing full screen, as that’s much more natural behavior on that operating system. But now “full screen” is a big deal in OS X Lion, maybe that will start effecting this stuff.

If we put this stuff to a spread and use the entire data set, here’s one way to break it down:

Width Range	Browser Window	Screen Resolution
0px – 500px	1.13%	1.02%
501px – 800px	2.01%	1.06%
801px – 1000px	2.84%	0.07%
1001px – 1200px	14.91%	6.86%
1201px – 1400px	40.65%	35.57%
1401px – 1600px	17.38%	17.17%
1601px – 2000px	20.41%	34.34%
2000px+	0.66%	3.91%

So where is mobile in all this? Despite reports of massive growth in mobile browsing, which I do not doubt, CSS Tricks has very little mobile traffic.

Let’s wrap it up with some quick hits:

• The most popular screen resolution is 1680 x 1050 with almost 13% of visits having a monitor of that size.
• Predictably, there is no one browser window size that is far above all others, but leading the pack is 1349 x 667 at 0.75% of visits.
• The most popular screen resolution ratio is 16:10 with 46% of visits having that. Maybe because a lot of video is 16:9 and monitor makers wanted people to watch that but still have room for some OS chrome? 16:9 is next with 29%, 5:4 with 12%, and 4:3 with 8%.
• All of those ratios are wider than tall. Turns out only 2% of visitors have screens that are taller than wide (or at least that report that way).
• Actual browser windows also tend to be wider than tall, with only 3% of visits having dimensions that are taller than wide.
• Average number of pixels per screen = 1,539,515
• Average screen resolution = 1526 x 967
• Average browser window size = 1366 x 784

To Jamie Bicknell of Rentedsmile Web Design for helping me wrassle together the MYSQL queries and PHP needed to do anything useful with the data.

How to Get the Screen, Window, and Web Page Sizes in JavaScript

To detect whether the browser window is in landscape or portrait mode, you can compare the browser window’s width and height.

But from my experience it’s easy to get confused in the bunch of sizes: screen, window, web page sizes.

How are these sizes defined, and, importantly, how to access them is what I’m going to discuss in this post.

Table of Contents

1.1 The screen size

The screen size is the width and height of the screen: a monitor or a mobile screen.

window.screen is the object that holds the screen size information. Here’s how to access the screen width and height:

1.2 The available screen size

The available screen size consists of the width and height of the active screen without the Operating System toolbars.

To access the available screen size you can use again the window.screen object:

2.1 The window outer size

The window outer size consists of the width and height of the entire browser window, including the address bar, tabs bar, and other browser panels.

To access the outer window size, you can use the properties outerWidth and outerHeight that are available directly on the window object:

2.2 The window inner size

The window inner size (aka viewport size) consists of the width and height of the viewport that displays the web page.

window object provides the necessary properties innerWidth and innerHeight :

If you’d like to access the window inner size without the scrollbars, you can use the following:

3. The web page size

The web page size consists of the width and height of the page content rendered.

Use the following to access the size of the web page content (includes the page’s padding, but not border, margin or scrollbars):

If pageHeight is bigger than the window inner height, then a vertical scrollbar is displayed.

Hopefully, now you have a better idea of how to determine different kinds of sizes.

The screen size is the size of your entire screen (or monitor), while the available screen size is the size of the monitor excluding the OS taskbars or toolbars.

The window outer size measures the entire browser window (including the address bar, tabs bar, side panels if opened), while the window inner size is the size of viewport where the web page renders.

Finally, the web page size is the size of the web page with its content.

Как получить размеры экрана, окна и веб-страницы в JavaScript?

Доброго времени суток, друзья!

Представляю Вашему вниманию перевод небольшой заметки «How to Get the Screen, Window, and Web Page Sizes in JavaScript» автора Dmitri Pavlutin.

Для определения ориентации окна браузера (ландшафтной или портретной) можно сравнить его ширину и высоту.

Однако во всевозможных доступных размерах легко запутаться: существуют размеры экрана, окна, веб-страницы и т.д.

Что означают эти размеры и, главное, как их получить? Именно об этом я и собираюсь рассказать.

1. Экран

1.1. Размер экрана

Размер экрана — это ширина и высота всего экрана: монитора или мобильного дисплея.

Получить информацию о размере экрана можно с помощью свойства screen объекта window :

1.2. Доступный размер экрана

Доступный размер экрана — это ширина и высота активного экрана без панели инструментов операционной системы.

Для получения доступного размера экрана снова обращаемся к window.screen :

2. Окно

2.1. Размер внешнего окна (или внешний размер окна)

Размер внешнего окна — это ширина и высота текущего окна браузера, включая адресную строку, панель вкладок и другие панели браузера.

Получить информацию о размере внешнего окна можно с помощью свойств outerWidth и outerHeight объекта window :

2.2. Внутренний размер окна (или размер внутреннего окна)

Внутренний размер окна — это ширина и высота области просмотра (вьюпорта).

Объект window предоставляет свойства innerWidth и innerHeight :

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

3. Размер веб-страницы

Размер веб-страницы — это ширина и высота отображаемого содержимого (отрендеренного контента).

Для получения размера веб-страницы используйте следующее (включает в себя внутренние отступы страницы, но не включает границы, внешние отступы и полосы прокрутки):

Если pageHeight больше, чем внутренняя высота окна, значит, присутствует вертикальная полоса прокрутки.

4. Заключение

Надеюсь, теперь Вы понимаете, как получать различные размеры.

Размер экрана — это размер монитора (или дисплея), а доступный размер экрана — это размер экрана без панелей инструментов ОС.

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

Наконец, размер веб-страницы — это размер контента.

How to set browser window size larger than the screen resolution in Windows XP?

I would like to set browser size (mainly width) larger than the screen resolution in Windows XP. It looks like there is no easy way of dragging the browser window and resizing it. It resizes to maximum width and height of the actual screen, but no larger.

I need to check and test some webpages on large screens, but I have only a small notebook of my own. Is there a way how to accomplish a larger browser window? Preferrably in Chrome, but any browser in Windows will do.

9 Answers 9

This problem can be solved in two ways: —

1. Universal browser solution

1. Create a dummy html page
2. Add an iframe to its body with the width and height attributes set to the desired dimension
3. Set the iframe’s src attribute to the page you want to test

2. Individual browser’s developer tools

Chrome

1. Open the developer tools using Ctrl + Shift + i
2. Click the second button top left that looks like a mobile phone
3. Drag the width to the desired width and refresh the page (F5)

Internet Explorer

1. Press F12
2. Go to the emulation tab
3. Change the resolution dropdown to the desired resolution
4. Reduce the height of the developer tools bar until the horizontal scrollbars appear

Firefox

1. Open the developer tools using Ctrl + Shift + i
2. Press the third icon in the icons on the top right of the developer tools called «Responsive Design Mode»
3. Choose the resolution in the top left dropdown selector on the top left of the webpage viewport.

I am testing another resolution by zoom out — every browser supports ctrl + and ctrl —

This is possible. First ‘restore’ (i.e. unmaximize) the window. Then you can simply adjust the width and height of the browser by using the edges of that particular window as you like. This applies to any browser and application windows including google-chrome.

It seems like this doesn’t work for every user. There’s a tool called uuspy to do this as suggested in here. I haven’t try on how to do this. But, since the ui of uuspy looks not that user-friendly here’s quick tip. Open uuspy. There, in the main window, you’ll see a search box. Type the first few letters of the current ‘title’ of the browser there (like ‘test — Google Search’), and then click refresh . It’ll show a list of windows and child-windows of processes containing the searched partial title in the title-bar. Click on the relevant one (the root/parent is the one most likely.) Then, click GetInfo . There’s two text panes there. On the left pane, there’s WS_THICKFRAME. unselect it and then click setStyle . That will freeze the resizing. I think you’ll have to read the original SO answer to know exactly what needs to be done.