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.
The Opera desktop browser has a Small Screen view (see Figure 15-5) that mimics a mobile screen, loading ...