Determine orientation in Web Page

As the height and width of the browser is affected on changing the orientation of the iPhone, Safari provides a Javascript event called onorientationchange on the tag which notifies whenever you tilt the orientation. Safari also provides a property called window.orientation which provides the angle of tilt with 0° being the bottom of the iPhone.


So the code would like something like this in HTML

Debugging Web Pages on iPhone Safari

Developing can be most effective if there is a good ability to know of problems in the developed content. iPhone allows a user to view problems in HTML, CSS, Javascript on web pages by enabling the debug console on Safari.

Enable Debug Console




Debug Console in Action

After enabling the console, going to any web page automatically adds a 48 pixel bar summarizing the debug messages.




Its nice that even tips are presented which goes on to show the effort put into this functionality - where just showing errors is cause for celebration.

iPhone Web Pages Development

The HTML client on an iPhone is a standard full blown browser found on Apple laptops and desktops called Safari.

Safari on iPhone differs very slightly as follows:

• Resources (HTML, CSS, Images, etc.) have to be less than 10MB
• Javascripts are not allowed execution for more than 5 seconds
• Support for a limited set of mime-types - No Flash, Java Applets, SVG, etc.
• No file uploads/downloads
• No Plug-in installations
• Simultaneously only 8 websites can be loaded
• Certain CSS/Javascript actions are disabled for standard user interface behavior
• Mouse hover events
• Hover styles
• Tooltips etc.

iPhone Safari Layouts

For now Safari being the only vehicle for 3rd party applications into the iPhone, here are the most basic layouts on the glass for the browser.

Video on iPhone

iPhone is capable of playing three types of video content as detailed below. Being unable to play Adobe Flash content, one has to convert video to one of these formats. iTunes also will not accept any video unless in these formats.

iPhone Video Formats

Video Codec	H.264 (MPEG-4 part 10) Baseline Profile [apple]	H.264 (MPEG-4 part 10) Baseline Profile (up to Level 1.3) [apple]	MPEG-4 Simple Profile (MPEG-4 part 2) [apple]
Video Bandwidth	1.5 Mbps	768 Kbps	2.5 Mbps
Video Resolution	640x480	320x240	640x480
Video FPS	30	30	30
Audio Codec	AAC-LC (Low Complexity) Stereo Audio	AAC-LC (Low Complexity) Stereo Audio	AAC-LC (Low Complexity) Stereo Audio
Audio Bandwidth	160 Kbps	160 Kbps	160 Kbps
Audio Sampling Rate	48kHz	48kHz	48kHz
File Formats	.m4v .mp4 .mov	.m4v .mp4 .mov	.m4v .mp4 .mov

iPhone has Truecolor

To test out what color level the iPhone had I decided to do a simple test - put the hightest color depth image online and view it from the iPhone. So I programmatically generated this RGB image with 1 byte per color, or 256 shades each for Red-Green-Blue respectively.


Viewing it from the iPhone was exactly the same as my Desktop display set to Truecolor.

Dimensions

A quick glance at the dimensions of the iPhone and its display.

Unfortunately Apple has not published any official information on the screen's color depth, but that should be able to be calculated.