Smartphone and tablet usage is quickly usurping the desktop. Targeting the dizzying array of browsers, screen sizes and devices in a market experiencing hardware fragmentation is one of the challenges developers encounter. Although responsive web design does not offer a panacea for all scenarios, designing your web mapping applications to be mobile-friendly using this technique can provide an improved experience to your end-users.
CSS3 media queries enable developers to selectively style their pages based on properties (device width or height, resolution, orientation) of the browser where the page is being rendered. For instance, you can now choose to style a page differently for a small screen such as smartphone versus a slightly larger screen such as a tablet, or the desktop.
Using the Legend Widget sample as a starting point, I will show you how I modified an ArcGIS API for JavaScript application to support tablet (768 x 1024px) and smartphone devices (320 x 480px). As you read along you can explore the sample app that accompanies this post.
Device orientation and the ability to adjust the viewport zoom level make styling browser based mobile applications significantly more complicated. Mobile browsers introduce two new issues not encountered on desktop browsers: The ability of the user to alter the screen orientation between portrait and landscape mode, and the fact that the viewport does not display all sites at their native resolution.
Handling device resolution and rotation
A media query can expand on the media type syntax, providing additional options to further enhance web pages to accommodate different display devices. For instance, a media query can be appended to a media type declaration screen by adding the media query in parentheses using and:
@media screen and (min-device-width:768px) and (max-device-width:1024px);
The above media query targets devices that have a minimum device width of 768 pixels and a maximum device width of 1024 pixels. There is also a media query to adjust styling based on device orientation. To take advantage of this type of media query, use the orientation parameter. To apply styles to devices in landscape mode use the following media query:
/* styles go here */
}
Styling can also be adjusted based on the device’s resolution. To target a higher density screen such as the iPhone 4, while ignoring lower density screens such as older iPhones, use the webkit-device-pixel-ratio:
/* high resolution device styles go here */
}
It’s worth noting the vendor prefix is required. The above code snippet uses the webkit vendor prefix. If we wanted to target, for instance, the Motorola Droid that has a pixel density of 1.5 we would write:
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min–moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
/* styles go here */
}
The viewport controls how much mobile browsers zoom into a web page. I modified the sample’s viewport tag to include a width attribute:
Instead of hardcoding the width attribute to a specific resolution such as 320px, use device-width to ensure there is a one-to-one relationship between the target device and the screen resolution. The width attribute and media queries enable you to tweak the layout of your application’s user interface (UI) components as the device is rotated. For instance, on a device in portrait mode the legend is not visible. However, when rotated to landscape mode the toolbar disappears and the legend becomes visible.
On larger devices, such as the iPad, Apple’s Human Interface Guidelines (HIG) recommend using a Split View Controller. In portrait mode, per the specification in the HIG, a toolbar button is provided for displaying the left pane as a popover. In landscape orientation, the smaller pane on the left side of the SplitView contains the legend, and the larger pane on the right displays the map.
Handling variations in screen real estate
Maps occupy a large amount of screen real estate, leaving little room for additional UI components. For this reason, the mobile version of the application does not include a zoom slider. Users can use the pinch gesture to zoom in and out. However, the slider is included in the desktop version.
The CSS3 Working Group has proposed an extension to media queries support in CSS3. JavaScript developers can evaluate media queries at runtime and listen for updates in certain media query conditions. For example, the matchMedia method can be used to check for a certain device aspect ratio or width:
The returned object contains two properties: matches, a Boolean value indicating if the media query parameter matches the current state, and media, a serialized form of the associated media request. If the browser is 800px or greater this code adds the slider control, otherwise the slider is removed.
isDesktop = mediaQueryList.matches;
if (isDesktop) {
map.showZoomSlider(); // add slider
} else {
map.hideZoomSlider(); // remove slider
}
}
The call to matchMedia also checks for min-device-aspect-ratio: 1/1 to detect whether the app is being viewed by a tablet in landscape mode or by a desktop. Since a common resolution on desktops is 1024 pixels wide, excluding the min-device-aspect-ratio causes the desktop style sheets to be applied to the tablet in landscape orientation.
Download sample code
Contributed by Chris Mahlke of the ArcGIS API for JavaScript development team
Additional helpful mobile web development resources:
Developing Web Apps for Android
Test if your media queries fit in either portrait or landscape mode
Live pixel checker
List of displays by pixel density
Mobile web performance measurement tool
Nice article Chris! Here’s another helpful link to a post I wrote. It’s on detecting and displaying browser height and width so developers can learn more about their testing devices (as related to things like media queries): http://www.andygup.net/?p=617
Hi Andy, thanks! I checked out your sample app on a device and it’s a nice alternative solution I have not seen before. I will have to add it to my repertoire of tools when when designing for multiple devices.
Excellent article and very insightful! Love the graphics. I have been looking for an article like this. Thanks.