screen.width is still useless

In a 2013 article, Peter-Paul Koch concluded that “screen.width/height is completely unreliable.” The main reason being that some browsers provide values in physical pixels, while others measure “the width and height of the ideal viewport; the one you get when using width=device-width.

Which option is the preferred one? Is there an “official” definition? Currently there is no official definition, however there has been some past work which has aimed at providing a standard. The in CSSOM View Module, W3C Working Draft 17 December 2013 states:

The width attribute must return the width of the output device, in CSS pixels.
The height attribute must return the height of the output device, in CSS pixels.

In January 2015, we decided to do some additional research and see whether one of the approaches has established itself as a de-facto standard or whether PPK’s conclusion is still valid today.

Is the unit for screen.width/.height CSS or physical pixels?

Browser

CSS

Physical

Android Built-In Andr < 4 Andr  4
Android Chrome  27.0 18.0
Android Opera  15.0  12.10
Android Firefox  25.0 < 25.0
Android Dolphin Andr < 4 Andr  4
Android Maxthon Andr < 4 Andr  4
iOS Safari
iOS Chrome
iOS Coast
iOS Mercury
BlackBerry  10.1.0 < 10.1.0
Windows Phone IE WP 8.0 GDR3 WP < 8.0 GDR3
Windows RT IE
Bada Dolphin < 3.0 3.0

Are the values adjusted (P and L) or not (either P or L) when the orientation of the device is changed?

Browser

P and L

Either P or L

Android Built-In Andr < 4.2 Andr  4.2
Android Chrome  27.0 (18.01) 18.011
Android Opera
Android Firefox
Android Dolphin (✓) Andr 4.2.1, 4.3
Android Maxthon (✓) Andr 4.2.x, 4.3
iOS Safari
iOS Chrome
iOS Coast
iOS Mercury
BlackBerry
Windows Phone IE WP 7.0 WP  7.5
Windows RT IE
Bada Dolphin

1The results for Android Chrome 18.0 were inconsistent.

Major findings:

  1. The majority of browsers tested in their recent versions provide screen dimensions in CSS pixel units, some of which have been changed from physical units. Exceptions: the Android Built-In browser, some of the less popular Android browsers and Bada’s Dolphin.
  2. The device measurements are updated when changing the screen orientation within the more popular 3rd party Android browsers. Some of the less popular browsers, iOS and WP IE browsers do not update the screen measurements.
  3. Specific versions of Android browsers provide smaller values than expected. This data can be referenced in the tables below.

Conclusion:
While there is a trend towards using CSS pixels within more popular browsers, the use of screen.width/.height is still unreliable. With the more popular browsers providing screen dimensions in CSS pixels, there is some hope that the less popular browsers will do the same in the medium term. Since professionals are split with regard to updating measurements depending on device orientation, we don’t expect any short-term results.

Browser/hardware combinations that return smaller screen values than expected

Platform

Browser

CSS

Physical

Expected

LG Nexus 4 / Android 4.4 Chrome 39.0 384×640 / 640×384
Opera 16.0 384×592 / 598×384 (384×640 / 640×384)
Dolphin 11.3.4 768×1184 / 1196×768 (768×1280 / 1280×768)
Maxthon 4.3.6 768×1184 / 1196×768 (768×1280 / 1280×768)
NetFrontLife 2.3 768×1184 / 1196×768 (768×1280 / 1280×768)
HTC One / Android 4.4.2 Chrome 39.0 360×640 / 640×360
Opera 26.0 360×640 / 640×360
Dolphin 11.3.4 1080×1920 / 1920×1080
Maxthon 4.3.6 1080×1776 / 1794×1080 (1080×1920 / 1920×1080)
NetFrontLife 2.3 1080×1776 / 1794×1080 (1080×1920 / 1920×1080)
LG Nexus 5 / Android 4.4.4 Chrome 39.0 360×640 / 640×360
Opera 24.0 360×592 / 598×360 (360×640 / 640×360)
Dolphin 11.3.4 1080×1776 / 1794×1080 (1080×1920 / 1920×1080)
Maxthon 4.3.6 1080×1776 / 1794×1080 (1080×1920 / 1920×1080)
NetFrontLife 2.3 1080×1776 / 1794×1080 (1080×1920 / 1920×1080)

Obviously, the sizes of browser or OS menus are subtracted from the real screen size. This may be due to the use of different methods provided by the Android APIs.

Platform

Browser

CSS

Physical

Expected

ASUS Padfone Infinity Phone / Android 4.1.2 Chrome 30.0 360×640 / 640×360
Firefox 24.0 1080×1920 / 1920×1080

but…

Platform

Browser

CSS

Physical

Expected

ASUS Padfone Infinity Station / Android 4.1.2 Chrome 30.0 800×1232 / 1280×752 (800×1280 / 1280×800)
Firefox 24.0 1200×1848 / 1920×1128 (1200×1920 / 1920×1200)

Here are some values ordered by browser:

Browser

Platform

CSS

Physical

Expected

Android Built-In Samsung Galaxy Nexus / Android 4.2.1 720×1280 / 720×1280
LG G2 / Android 4.2.2 1080×1920 / 1080×1920
Samsung Galaxy Nexus / Android 4.3 720×1280 / 720×1280
HTC One / Android 4.4.2 1080×1920 / 1080×1920

The Android Built-In browser provides values for the real display size in physical pixels.

Browser

Platform

CSS

Physical

Expected

Chrome 33.0 Samsung Galaxy Nexus / Android 4.3 360×592 / 598×360 (360×640 / 640×360)
Chrome 37.0 Samsung Galaxy Nexus / Android 4.2.1 360×592 / 598×360 (360×640 / 640×360)
Chrome 39.0 LG G2 / Android 4.2.2 360×640 / 640×360
ASUS Nexus 7 / Android 4.4.2 601×962 / 962×601
HTC One / Android 4.4.2 360×640 / 640×360
YotaPhone 1 / Android 4.4.4 360×640 / 640×360
HTC Nexus 9 / Android 5.0.1 768×1024 / 1024×768
Chrome beta 40.0 Samsung Galaxy Nexus / Android 4.2.1 360×640 / 640×360

Recent versions of Chrome provide values in CSS pixels for the real display size.

Browser

Platform

CSS

Physical

Expected

Opera 15.0 Samsung Galaxy Nexus / Android 4.3 360×592 / 598×360 (360×640 / 640×360)
Opera 24.0 Samsung Galaxy Nexus / Android 4.2.1 360×640 / 640×360
ASUS Nexus 7 / Android 4.4.2 601×906 / 962×553 (601×962 / 962×601)
Opera 26.0 LG G2 / Android 4.2.2 360×640, 640×360
HTC One / Android 4.4.2 360×640, 640×360
YotaPhone 1 / Android 4.4.4 360×640, 640×360
HTC Nexus 9 / Android 5.0.1 768×1024, 1024×768

Recent versions of Opera provide values in CSS pixels for the real display size.

Browser

Platform

CSS

Physical

Expected

Firefox 27.0 Samsung Galaxy Nexus / Android 4.3 360×592 / 598×360 (360×640 / 640×360)
Firefox 30.0 Samsung Galaxy Nexus / Android 4.2.1 360×592 / 598×360 (360×640 / 640×360)
Firefox 34.0 Samsung Galaxy Nexus / Android 4.2.1 360×592 / 598×360 (360×640 / 640×360)
LG G2 / Android 4.2.2 360×592 / 598×360 (360×640 / 640×360)
Samsung Galaxy Nexus / Android 4.3 360×592 / 598×360 (360×640 / 640×360)
ASUS Nexus 7 / Android 4.4.2 600×904 / 960×552 (600×960 / 960×600)
HTC One / Android 4.4.2 360×640 / 640×360
YotaPhone 1 / Android 4.4.4 360×640 / 640×360
HTC Nexus 9 / Android 5.0.1 768×976 / 1024×720 (768×1024 / 1024×768)

Firefox does not provide reliable values for the real display size.

Browser

Platform

CSS

Physical

Expected

Dolphin 11.3.4 Samsung Galaxy Nexus / Android 4.2.1 720×1184 / 1196×720 (720×1280 / 1280×720)
LG G2 / Android 4.2.2 1080×1776, 1794×1080 (1080×1280 / 1280×1080)
Samsung Galaxy Nexus / Android 4.3 720×1280 / 720×1280
ASUS Nexus 7 / Android 4.4.2 800×1205 / 1280×736 (800×1280 / 1280×800)
HTC One / Android 4.4.2 1080×1920 / 1920×1080
YotaPhone 1 / Android 4.4.4 1080×1920 / 1920×1080
HTC Nexus 9 Android 5.0.1 1536×1952 / 2048×1440 (1536×2048 / 2048×1536)

Dolphin does not provide consistent values for the real display size.

All tests were performed with the following viewport specifications:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
@-ms-viewport {
  width: device-width;
  zoom: 1;
}
</style>

Leave a Reply