Cover by Brian Fling

Safari, the world’s most comprehensive technology and business learning platform.

Find the exact information you need to solve a problem on the fly, or go deeper to master the technologies and skills you need to succeed

Start Free Trial

No credit card required

O'Reilly logo

Desktop Testing

A big advantage of mobile web products is that you can do the majority of your testing from your desktop before ever getting it on a device. You can verify the majority of your markup, styles, and JavaScript, as well doing functional tests on desktop browsers, before putting them on devices and doing your context tests. Desktop testing reduces the time span between developing a feature, testing a feature, and fixing a feature, and ultimately allows you to spend less time dealing with devices.

Frames

Many web browsers have a minimum window size that is larger than your average device screen, making it impractical for testing mobile websites or web apps in a desktop browser. This is where inline framesets, or iframes, come in handy. Create a web page with an iframe, specifying the dimensions to match your target mobile screen (as shown in the following code), and then add the URL to your mobile project:

<iframe src ="mobile/index.html" width="240px" height="320px"
style="border:1px solid;"> </iframe>

Because you can embed multiple iframes in a single page, each pointing to the same URL, you can view how your page will look in multiple screen dimensions from a single page. For demonstration purposes, I often use an image of the target device as a background, positioning the iframe where the screen should go, presenting the mobile project as if it were on the device.

Opera

The Opera desktop browser has a Small Screen view (see Figure 15-5) that mimics a mobile screen, loading ...

Find the exact information you need to solve a problem on the fly, or go deeper to master the technologies and skills you need to succeed

Start Free Trial

No credit card required