HTML and CSS Reference
In-Depth Information
figure 8-48
Mobile sDKs, emulators, and simulators
Emulator and Simulator
Adobe Device Central
A suite of emulators for a variety
of mobile devices
Android SDK
SDK for Android development
(Mac OS X, Windows, Linux)
Firefox Mobile Emulator
Emulator for mobile version of
Firefox, also known as Fennec,
developed for Nokia and Android
iPhone SDK
SDK and emulator for the iPhone
(Mac OS X only)
iPhone simulator that allows devel-
opers to test their Web sites on a
480 pixel screen
iPad Emulator
Online emulator for iPad
MobiOne Studio
iPhone emulator for Windows
(free trial period with option to
Opera Mini Simulator
Java applet that simulates the
Opera mobile browser
Opera Mobile Emulator
Emulator for mobile version
of Opera
Emulator for webOS devices
Windows Phone Emulator
Developer tools for the
Windows Phone
Another way to test your mobile design is to submit it to a testing lab. A site such as
MobiReady ( ) 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).
Search WWH ::

Custom Search