LAYOUT

TwitterFacebook
Get flash to fully experience Pearltrees
Those who create responsive design for iPhone may be aware of the viewport scaling bug in iPhone Safari. The bug occurs when you set the viewport width to device-width and rotate the phone to landscape view.

iPhone Safari Viewport Scaling Bug

http://webdesignerwall.com/tutorials/iphone-safari-viewport-scaling-bug
http://www.quirksmode.org/mobile/viewports2.html

A tale of two viewports — part two

Many thanks to Grace Kloba (Google), David Storey and Anne van Kesteren (Opera), Mike O'Malley (Microsoft), Kartikaya Gupta and George Staikos (RIM), and Mark Finkle (Mozilla) for reviewing earlier versions of this piece and providing me with valuable feedback.
REDIRECT TO MOBILE

ORIENTATION

Media Queries

Abstract http://www.w3.org/TR/css3-mediaqueries/
The iPhone 4 features a vastly superior display resolution (614400 pixels) over previous iPhone models, containing quadruple the 153600-pixel display of the iPhone 3GS.

Designing for iPhone 4 Retina Display: Techniques and Workflow - Smashing Magazine

http://www.smashingmagazine.com/2010/11/17/designing-for-iphone-4-retina-display-techniques-and-workflow/
Four years ago, (eight months before the original iPhone was announced) Dave Hyatt wrote about high DPI web sites on the Surfin’ Safari blog:

Targeting the iPhone 4 Retina Display with CSS3 Media Queries - WaltPad

http://blog.iwalt.com/2010/06/targeting-the-iphone-4-retina-display-with-css3-media-queries.html
So, um, maybe you heard: there’s a new iPhone out. For my money (and I shelled out plenty for it), the phone’s best feature is the new “Retina display,” the eye-popping high-resolution screen.

Designing for iPhone 4's Retina Display (Global Moxie)

http://globalmoxie.com/blog/designing-for-iphone4-retina-display.shtml
July 8, 2010 by Luke Wroblewski http://www.lukew.com/ff/entry.asp?1142

Designing for the Retina Display (326ppi)

http://ivomynttinen.com/blog/the-ios-design-cheat-sheet/ When you are designing a lot of applications for Apple’s touch devices like the iPhone or iPad you often have to follow some conventions regarding sizes or radii of Icons, Buttons or Tables.

The iOS Design Cheat Sheet / Ivo Mynttinen - (Navigazione anonima)

iPhone - Safari Screen Dimensions & Layout | iPhone Compatible

http://www.iphonecompatible.net/design-tips-tools/iphone-safari-screen-dimensions-layout/ Here are the dimensions of the iPhone screen when running Safari. In portrait orientation the screen dimensions are 320 by 356 pixels. In landscape the dimensions change to 400 by 208 pixels.

Cheat Sheet: iPod Touch, iPhone e iPad Web App Design

Durante lo sviluppo di App o Web App per dispositivi come iPod Touch , iPhone e iPad è necessario seguire alcune convenzioni dovute alle dimensioni dello schermo, la risoluzione, la grandezza della status bar, ecc. iOS Design Cheat Sheet è una raccolta delle specifiche più importanti, e permette a programmatori e web designer di avere sempre a portata di mano tutte queste informazioni in un unico documento. Sviluppando per dispositivi con display ad alta risoluzione (display retina di iPhone 4) o a bassa risoluzione (ad es. iPhone 3GS) non è necessario modificare i DPI in Photoshop o Fireworks, basta semplicemente raddoppiare/dimezzare la risoluzione rimanendo a 72 DPI .
Making a webapp for the iPhone is a lot like making a normal web site, but with a few quirks to abide by. In this article, I’ll give you a wide variety of tips, covering things such as: “must-haves”, usability guidelines, testing/debugging, pitfalls, and performance issues.

10 Tips for New iPhone Developers | Nettuts+

Hide the Address Bar within Mobile Safari

These advantages allow us to create web apps within that browser that look as good as native applications. If your goal is to create web apps that look like native applications, the details count. One of those details: hiding the address bar.

Gotcha: Hiding the Status Bar

All Content Copyright © 2008-2012 • iOS Developer Tips, All Rights Reserved. iPhone and iPad are registered trademarks of Apple, Inc. iOS is a registered trademark of Cisco Technology, Inc.
Hides or shows the status bar, optionally animating the transition. - (void)setStatusBarHidden:(BOOL)hidden withAnimation:(UIStatusBarAnimation)animation Parameters

statusbar - IOS 4.3 hide status bar permanently - Stack Overflow