javascript

javascript:

Mobile Browser Reported Screen Sizes – Jan 2012

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

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

Posted in: mobile development

Tags: android, javascript, mobile browser

WebSockets NOT supported in iOS 4.0

Posted by Jim Bergman on April 26, 2010 at 1:58 am

UPDATE December 2010: iOS 4.2 now has websocket support

UPDATE July 2010: since the beta 2 release of iOS4, Apple has disabled websockets support. A few readers pointed this out, so I made a trip to an Apple Store it run a few tests.

Confirmed: iOS4 as it is released reports it does NOT have websocket support.

ORIGINAL POST:

Since the Safari web browser on the iPhone is based on WebKit, it makes sense that at some point support for WebSockets would make it to the iPhone.

Safari on iPhone OS 4.0 beta 2 supports WebSocket.

Once OS 4 is available for the iPad, support should be there as well.

Thanks to reader Arun for pointing this out.

Posted in: technology, website development

Tags: ajax, iOS4, iphone, iphone os 4, javascript, websocket, websocket example, websocket test, websockets

Test your web browser for WebSocket support

Posted by Jim Bergman on December 9, 2009 at 6:34 pm

Google announced an improved way for a web application to communicate with a server. The new method is called Web Sockets. You can read more info here on Web Sockets.

Here is a quick test to see if your web browser supports Web Sockets. At the time this post was published Google Chrome developer channel release 4.0.249.0 is the only browser to support Web Sockets.

Here is the JavaScript code (or right click and save file as WebSocketTest.js):

function WebSocketTest()
{
  if ("WebSocket" in window)
  {
    // Google example code
    //  var ws = new WebSocket("ws://example.com/service");
    //  ws.onopen = function()
    //  {
    //    // Web Socket is connected. You can send data by send() method
    //    ws.send("message to send"); ....
    //  };
    //  ws.onmessage = function (evt) { var received_msg = evt.data; ... };
    //  ws.onclose = function() { // websocket is closed. };
    alert("WebSockets supported here!rnrnBrowser: " + navigator.appName + " " + navigator.appVersion + "rnrntest by jimbergman.net (based on Google sample code)");
  }
  else
  {
    // the browser doesn't support WebSockets
    alert("WebSockets NOT supported here!rnrnBrowser: " + navigator.appName + " " + navigator.appVersion + "rnrntest by jimbergman.net (based on Google sample code)");
  }
}

Sample HTML code (save file as WebSocketTest.html in same folder as .js file above):

<html>
<head>
<title>JimBergman.net - JavaScript: WebSocketTest</title>
<script type="text/javascript" src="WebSocketTest.js"></script>
</head>
<body bgcolor="#FFFFFF">
<a href="javascript:WebSocketTest()">Run WebSocket test</a>
</body>
</html>

UPDATE:

Result of this test on an Windows 7 PC in Google Chrome v4.0.249.0