Category: Browsers

Check HTML5 Browser Height and Width using Canvas

I’ve been working on building mobile web apps the last few weeks and I needed a quick way to check the browsers screen size for both mobile and non-mobile. So, I built a small, rough app that quickly lets me do that. Here’s what the app does: 

–          Detect HTML5 Canvas support

–          For height give clientHeight, offsetHeight and scrollHeight.

–          For width give clientWidth, offsetWidth and scrollWidth.

–          Recalculate when browser is resized or rotated. Here’s the link to try it out.

Remember, it’s rough so if you need to tweak it for your needs feel free to grab the code via the link or QR Code and play: https://andygup.net/samples/windowresize/

At the heart of the app there are a few key pieces of code. There’s the Canvas element:

<canvas id="rectangle1" style="height: 100%; width: 100%; border:solid 1px #000000;"></canvas>

And, there’s the code that reads the height and width properties from the canvas element:

document.getElementById("main").innerText =
"clientHeight: " + rectangle1.clientHeight + ", clientWidth: " + rectangle1.clientWidth + "\r"
+ "offsetHeight: " +rectangle1.offsetHeight + ", offsetWidth: " + rectangle1.offsetWidth + "\r"
+ "scrollHeight: " + rectangle1.scrollHeight + ", scrollWidth: " + rectangle1.scrollWidth;

Here are a few guidelines on how to interpret the results:

It works great! This means you are using a modern browser that supports the HTML5 Canvas element.

Nothing shows up. If the mobile browser shows nothing, it probably doesn’t support HTML5. Example of this is Firefox for Android. Hey don’t laugh, we can’t change what browser people use.

Rotating phone doesn’t change numbers. If the numbers don’t change when you rotate the phone, then the browser has incomplete support for HTML5. Example of this is Opera for Android.

Just the height numbers don’t change or are inaccurate. The default height for canvas on most browsers is 150px. So if the browser can’t interpret the property height:100%, then you may simply see a height of “150” in the app.

Height number is too small. In some browsers, if a sub-window is open, for example Chrome developer tools, then the height number reflects the available browser window height not including the developer tools sub-window.

If you have suggestions for improvements the let me know!

[Minor update: May 26, 2012 – corrected a couple typos]

References:

Caniuse– Canvas

Mozilla – Determining the dimensions of an element.

HTML5 Geolocation API – how accurate is it, really?

If you are a developer building applications that require location information then you need to know what is really possible with the HTML5 Geolocation API and not a bunch of hype. The blog post attempts to give you some insight into how it works with desktop and mobile browsers as well as having a greater appreciation for what is and what isn’t possible. I’m going to show you that accuracy depends on many factors, some of which are beyond your control, and at best the location information returned by the API is just an approximation.

[Editors note: as of June 29th, 2013 Part 2 of this post is now available]

Most common use case. For the most part, HTML5 Geolocation works just fine in dense urban areas when you are stationary with your laptop or smartphone Wifi turned on. This is the use case most commonly cited when questions are asked about accuracy. This makes sense because urban areas have many public and private Wifi routers and cell phone towers are typically closer together. As you’ll see, HTML5 uses these and other methods to pinpoint your location. However, it’s not always that simple and below are some other use cases that you should take into consideration.  

How does the API work? Depending on which browser you are using, the HTML5 Geolocation API approximates location based on a number of factors including your public IP address, cell tower IDs, GPS information, a list of Wifi access points, signal strengths and MAC IDs (Wifi and/or Bluetooth). It then passes that information to a Location Service usually via an HTTPS request which attempts to correlate your location from a variety of databases that include Wifi access point locations both public and private, as well as Cell Tower and IP address locations. An approximate location is then returned to your code via a JavaScript callback.

As an example to show you what type of information is sent to a Location Service, I did some basic testing with Firefox 11. Firefox uses Google’s Location Service. On a related note, as far as I can tell with Firefox 11 it isn’t passing cookies any more where in Firefox 3.6 they use to pass a user ID token.

Firefox 11 browser sends queries to https://maps.googleapis.com/maps/api/browserlocation/json? The example results have been obfuscated, but by looking at it you should get the idea of what content is being sent:

GET /maps/api/browserlocation/json?browser=firefox&sensor=true&wifi=mac:01-24-7c-bc-51-46%7Cssid:3x2x%7Css:-37&wifi=mac:09-86-3b-31-97-b2%7Cssid:belkin.7b2%7Css:-47&wifi=mac:28-cf-da-ba-be-13%7Cssid:HERESIARCH%20NETWORK%7Css:-49&wifi=mac:2b-cf-da-ba-be-10%7Cssid: ARCH%20GUESTS%7Css:-52&wifi=mac:08-56-3b-2b-e1-a8%7Cssid:belkin.1a8%7Css:-59&wifi=mac:02-1e-64-fd-df-67%7Cssid:Brown%20Cow%7Css:-59&wifi=mac:2a-cf-df-ba-be-10%7Cssid: ARCH%20GUESTS%7Css:-59 HTTP/1.1

Which location service do browsers use?

Not all Geolocation services are the same, and they certainly don’t all use the same algorithms and exact same databases. Because of this the results typically vary across browsers that use different Geolocation services.

Here’s my best attempt to document which Geolocation service each of the major browsers are using. I haven’t done any definitive testing however I do know from experience that different browsers and even different laptops for smartphones will return different locations when tested from the exact same location. Some location services are better in some cities and others are better in other cities. I haven’t come across a definitive list, most likely because the information is constantly being updated. I’ve included a link to a demo application at the bottom of this blog where I encourage you to also test the API against different browsers.

  • Chrome uses Google Location Services.
  • Firefox on Windows uses Google Location Services.
  • Firefox on Linux uses GPSD – https://catb.org/gpsd/. I’m not sure if this includes Android. I haven’t had a chance to test it yet.
  • Internet Explorer 9+ uses the Microsoft Location Service.
  • Safari on iOS uses Apple Location Services for iPhone OS 3.2+.
  • I’m not sure what Safari on Windows uses. With all the public distrust between Apple and Google, I wouldn’t be surprised if Safari on Windows also uses Apple’s Location Service, but I haven’t found any documentation to verify this and I haven’t tested it.
  • Opera uses Google Location Services. On a related note, I’ve also noticed that mobile Opera on Android accesses the GPS. This is something to consider from a battery usage standpoint.

Not all browsers support HTML5. It’s important to note that not all browsers support the HTML5 Geolocation API, for example Internet Explorer 8. The HTML5 Geolocation API is built into the browser and is accessible using JavaScript methods that access the navigator object. In order to work it requires HTML5 support in the browser. You can research whether or not a particular browser supports Geolocation by going here: https://mobilehtml5.org/ or https://caniuse.com.

Additionally, if a user has disabled JavaScript for some reason, then your Geolocation app won’t work in their browser. JavaScript code is required to access the API.

HTML5 Geolocation requires an internet connection. If you lose your internet connection then you won’t be able to access the Location Service. With no internet connection most browsers will not return a location. Sometimes you can access a cached location that is stored in the browser by the API. But, that cached location is the last valid location that was calculated by the API.

Is Wifi turned on or off? If Wifi is turned off on your phone, desktop machine, laptop or tablet , the Geolocation API service will try to find your location by other methods which include your public IP address, Cell tower ID triangulation or GPS. Public IP addresses databases usually return a location for your internet providers Point of Presence or PoP. Furthermore, some internet provides offer rotating IP addresses. So you get to use one IP address for a particular time period such as 48 hours and then you get a different one. So a Public IP address is usually only good enough to locate you to a particular City, or a general area of the City, or a Country depending on where you are in the world.

As for Cell Tower IDs it depends on what type of information your particular phone and Telco Carrier provides to the API. Some smartphones only return information on the current tower that the phone is pinging, which obviously makes triangulation very difficult and decreases accuracy to within a radius around that tower.

I’ve noticed that the native Android browser is significantly less accurate without Wifi. Without it I typically see accuracy numbers in the 1000+ meters range. As soon as I turn Wifi back on and I’m in a neighborhood or downtown area, the accuracy drops to less than 75 meters almost instantly.

Are they in a rural or urban location? Granted the vast majority of users will be in urban locations. However if you have requirements for users traveling outside of urban areas then this section applies to you. Geolocation in rural areas is significantly less reliable. If Wifi is turned on but the user is not near any Wifi access points, then the Geolocation service will also attempt to fallback to the other methods mentioned above.  Triangulation can be much more difficult in rural areas where towers are spread further apart, and for browsers that don’t use GPS the accuracy will suffer significantly.

Are you moving or stationary? Being stationary in an urban area offers far better accuracy with the Geolocation API than when you are moving. On my native Android phones it’s rare to get an accurate reading while driving around town. Occasionally a sporadic result would be returned when you stop at a light. To date, I have never gotten a valid reading while driving on a highway at speeds over 50 mph.

Is a VPN turned on? If a VPN is turned on, then the location will resolve to the VPN’s public IP address. For example, a user in Denver is logged into the company VPN which host is hosted at their headquarters office in a suburb of Dallas, Texas. The HTML5 Geolocation API will resolve the location to the headquarters public IP address in Dallas and not the user’s actual location. Quite a few corporate users have VPNs for security reasons.

Custom Geolocation as a fallback? Depending on your requirements you may want to implement your own IP Geolocation using a company such as IP2Location. Or use a third-party Geolocation service, such as Skyhook, as a fallback. Remember IP Geolocation only returns locations to a City or an area within a City. So, if you need more accuracy than that for your application, then don’t bother with this approach.

The downside to custom IP Geolocation is that this requires writing a server-side service to grab the browsers IP address. All server-side languages such as PHP, C#.NET, Java and JSP support these capabilities. You also have to subscribe to another service that lets you query their database by IP address and get a return value of an approximate location. There is no current way to get this information from the browser, on the client-side, using JavaScript.

HTML5 Geolocation doesn’t meet my requirements, what do I do? If you have critical requirements for gathering more precise location information than the HTML5 Geolocation API is capable of delivering then I’d recommend building your application using a native API such as Android or iOS.

How can I test this? You can test HTML5 Geolocation in different browsers using a test application that I built. I recommend trying it on different browsers and comparing the results yourself:

https://andygup.net/samples/html5geo/

References

Mozilla FAQ

Mozilla Developer Network

Google Location Service

W3C Geolocation API in IE 9

Safari Developer Library

Opera Geolocation

IP Geolocation

W3C – Privacy of Geolocation Implementations

Apple Q&A on Location Data

What do you read for technical news?

It was just a few years ago that I regularly scanned a list of mainstream developer and IT rags on a weekly basis: ComputerWorld, Visual Studio Magazine, SD Times, JDJ, and the list goes. Then one day early last year the thought hit me and I was a bit stunned to realize that I’d stopped reading online magazines. The vast majority of my technical info was now coming from blogs, online help docs and dizzying amount of internet searches. So, what happened? I have some theories that I’ve been thinking over the last year, but I can’t really nail down anything for certain. So, it’s most likely a combination of these five concepts below.

Rapid Change. My first thought is that technology has been changing so rapidly that simply digesting the changes and understanding them takes a huge chunk of time. Huge. I’ve blogged about this a number of times. This trend cuts across the entire tech industry. The upside is that innovation happens overnight and fixes as well as new features come out quickly. The downside is it’s harder for everyone to stay on top of all the changes across updates to features, libraries, SDKs, smartphone operating systems and browsers.

Super busy. My second thought is:  in addition to staying on top the über release cycle of web and mobile technologies, I’ve been so busy with project work that I simply had to narrow the scope of what I was reading. It’s a balancing act and there’s only so much time in the day. Superfluous information seemed to just slow me down, or worse it felt like a distraction from the day’s objectives. And in today’s online environment there is such a huge flow of information. So, there has to be a way or mechanism for focusing and filtering the fire hose of inbound data.

Irrelevant Info. My third thought is that every time I try to go back and read mainstream rags that I find myself sifting through a bunch of stuff that isn’t relevant to my immediate or near-term needs. Like I mentioned above, a good portion of it often seemed to be superfluous. Don’t get me wrong: online magazines offer well written and well thought out information. But, I felt the extra information, or perhaps even information overload in some cases, slowed me down. If it takes time to sift through article after article looking for a specific topic, my inclination is to go back out to a search engine and narrow down my search parameters.

Online Search Engines. Search engines have done an excellent job of (rapidly) indexing online technical content. I don’t need to mention them by name because you know all the players. At work we’ve often joked about a pattern we call “coding by search engine.” The pattern goes something like this:  copy a class name or error message, paste it into the search bar and then skim through the results. If you have to go more than one page deep in the search results then stop and redo the search. Mostly gone are the days of sifting through reams of paper documentation or digging around in some esoteric corner of a vendors website. I don’t think most customers will stand for that anymore. I think more information is instantaneously available at our fingertips now than any other time in history. It is astonishing, really.

Forums. My final thought is the voice of the developer community has never been more important. Online forums, such as Stack Overflow, have become to be perceived as definitive sources on technical questions of all kinds and about all different sorts of programming languages. I’ve been in many conversations where, right or wrong, someone interjected with a comment about something learned on Stack Overflow, or similar sites. These sites are well indexed by search engines, the community can vote answers up or down, and many brilliant and knowledgeable players contribute their knowledge. These are excellent, speed-of-light resources that are freely available.

So, there you have it. This is my two cents of what I’m reading these days and why I think I changed what I read. Leave a comment or email me about how you get your technical info injection. I’m really curious to hear your experience.

* Clip art courtesy of Microsoft Office 2007.