Featured

Supporting the SOPA/PIPA Site Blackout M

The majority of the internet community is taking a stand against SOPA/PIPA which attempts to fight copyright infringement through Internet censorship, and bypass the due process of law by allowing all

Supporting the SOPA/PIPA Site Blackout Movement

Fing-Fong-Fooey

Fing-Fong-Fooey is a game similar to Rock-Paper-Scissors, with the same purpose, to select one person in a group to be ‘it’. While Rock-Paper-Scissors (also called Ro-Sham-Bo) works with t

Test your web browser for WebSocket supp

Google announced an improved way for a web application to communicate with a server. The new method is called WebSockets. You can read more info here on WebSockets. Here is a quick test to see if your

Test your web browser for WebSocket support

7 Groundrules For An Intelligent Convers

Everybody loves a great conversation. It is one of life’s simple pleasures. Sharing ideas and perspectives is a great way feel alive and connected. Looking back at the high points in your life,

7 Groundrules For An Intelligent Conversation

Adding Costco Gas Stations to Google Map

How many time have you gone to search for something on the Internet, and it just wasn’t there? Many times travelling over the last few years, I’ve wanted to know where there was a Costco g

Adding Costco Gas Stations to Google Maps

Categories

Mobile Browser Reported Screen Sizes – Jan 2012

1

Posted by Jim Bergman on January 24, 2012 at 10:46 pm

UPDATE: this post is for Jan 2012, click here for the Feb 2012 report.

HTML5 / CSS3 development for mobile browsers needs to be aware of the reported screen size to effectively build a mobile site.

However, the screen resolution listed in the device specifications is NOT the same as what is reported by the mobile browser itself. Specifically, what is the window size information available via JavaScript using window.innerWidth and window.innerHeight. It is usually very different than the device’s screen resolution.

The iPhone and iPad are consistent and predictable. All iPhones report a window size of 320 x 460, and all iPads report a window size of 768 x 1004.

The ‘fun’ part is supporting the wide variety of window sizes on Android devices. However, it is exceptionally hard to find data on the window size different devices report via JavaScript.

A month ago I released a mobile app for Android and iOS called ScoreKeepr. During the update check to my server, the app reports the device’s windows size.

Here are the most common reported screen sizes for Android devices (in Portrait orientation):

Android phones
320 px width – 90% of devices queried
360 px width – 10% of devices queried

Android tablets
800 px width – 1 device reporting (insufficient data)

Using this information, you can more easily develop your CSS media queries, knowing what sizes your app is likely to encounter in the wild.

This will be an ongoing monthly report, and will reflect different reported window sizes when new devices are introduced. By regularly reporting this information, a trend over time can be identified.

What information are you collecting from your apps? Please share your suggestions for additional anonymous information to collect. Information must be available via JavaScript query.

UPDATE FEB 1st: final numbers for January 2012 included