HTML and CSS Reference
In-Depth Information
figure 8-48
Mobile sDKs, emulators, and simulators
Emulator and Simulator
Description
URL
Adobe Device Central
A suite of emulators for a variety
of mobile devices
devicecentral.html
Android SDK
SDK for Android development
(Mac OS X, Windows, Linux)
developer.android.com/sdk
Firefox Mobile Emulator
Emulator for mobile version of
Firefox, also known as Fennec,
developed for Nokia and Android
developer.mozilla.org/En/Mobile
iPhone SDK
SDK and emulator for the iPhone
(Mac OS X only)
developer.apple.com/
iPhoney
iPhone simulator that allows devel-
opers to test their Web sites on a
320
www.marketcircle.com/iphoney/
3
480 pixel screen
iPad Emulator
Online emulator for iPad
developers
www.ipad-emulator.com
MobiOne Studio
iPhone emulator for Windows
(free trial period with option to
purchase)
www.genuitec.com/mobile/
Opera Mini Simulator
Java applet that simulates the
Opera mobile browser
www.opera.com/mini/demo
Opera Mobile Emulator
Emulator for mobile version
of Opera
HP webOS SDK
Emulator for webOS devices
developer.palm.com
Windows Phone Emulator
Developer tools for the
Windows Phone
create.msdn.com/en-US/
Another way to test your mobile design is to submit it to a testing lab. A site such as
MobiReady (
ready.mobi
) tests your mobile Web site design and provides screen shots
and optimization tips. To test your site, you may have to submit personal information
including your e-mail address, phone number, and street address. Be aware that many
testing labs are not free. To view Kevin's mobile design in this session, you will not need
to have a mobile device or an emulator, but you may find one useful.
Configuring the Viewport
Mobile devices can display pages written for the larger screens found on desktop comput-
ers; but as Kevin discovered, too often the resulting pages are difficult to read and navigate.
Therefore, to optimize Kevin's sample page for the mobile Web, you first must learn how
Web pages designed for a computer desktop get adapted for use on a mobile device.
The contents of a Web page are displayed within a window known as the
viewport
.
On a desktop computer, the viewport is equivalent to the browser window; with printed
material, the viewport is the page box. Browsers on mobile devices support two kinds
of viewports: a
visual viewport
containing the Web page content that appears on the
screen, and a
layout viewport
containing the complete content of the page, some of
which is hidden from the user (see Figure 8-49).
