Photos en avant premières de l'#iphone5 . Finalement trè. iOS Fonts. iPhone - Safari Screen Dimensions & Layout | iPhone Compatible. iPhone Compatibility Tips. This article describes how you can use CSS rules and simple HTML changes to make your Web site more compatible with the Web browser in the iPhone and iPod Touch. Topics include what image formats and file formats are supported, controlling site magnification, how to create links to iPhone's built-in applications, and creating a custom Web Clip icon. iPhone Compatibility The iPhone has a built-in version of the Safari Web browser. One of the best things about the iPhone is that it allows Web sites to be viewed in Safari without any special modifications.
However, there are some simple steps you can take to ensure the best compatibility with Safari. Taking these steps can greatly enhance iPhone users' experience of your Web site without requiring you to change anything for desktop users. Everything in this tip can be applied to either the iPhone or the iPod Touch. All of the information in this tip is gleaned by Apple presentations and the information on their developer Web site. Double Tap. Targeting the iPhone 4 Retina Display with CSS3 Media Queries - WaltPad. Four years ago, (eight months before the original iPhone was announced) Dave Hyatt wrote about high DPI web sites on the Surfin’ Safari blog: One area of Web design that is going to become more important in the coming years is high DPI. For those of us working on WebKit, this will also become an issue for WebKit applications and for Dashboard widgets. The future is now.
The iPhone 4’s Retina Display doubles the pixel density we’re used to seeing on handheld devices and thus drastically improves the sharpness of text on the web. John Gruber’s “Why 960 × 640”: I don’t think that MobileSafari will be able to continue mapping the “px” unit to physical display pixels, because the disparity between the physical pixel size of old and new iPhones is going to be enormous. Dave Hyatt again: Most Web site authors have traditionally thought of a CSS pixel as a device pixel. This is exactly what’s happening on the iPhone 4. I tried that new feature out by adding this line to my little mobile website1: Designing for the Retina Display (326ppi) For three generations of the iPhone, Apple kept the screen consistent (320x480 pixels and 3.5 inches diagonal). But now Apple's new iPhone 4 boasts the "highest resolution phone screen ever (960x640 pixels, 3.5 inches diagonal, & an 800:1 contrast ratio).
" What's the impact to designers? But first, why is it an issue? Because of PPI (pixels per inch) or pixel density variations. "A screen with lower density has fewer available pixels spread across the screen width and height, where a screen with higher density has more — sometimes significantly more — pixels spread across the same area. Initial Palm and Android smartphones were in the same ballpark as Apple's first set of iPhones so ppi (pixels per inch) was roughly the same across these devices. iPhone: 320x480 | 3.5 in | 164ppiPalm Pre | 320x480 | 3.1 in 186ppiPalm Pixie | 320x400 | 2.63 in | 194ppiT-Mobile G1 | 320x480 | 3.2 in | 180ppi MyTouch 3G | 320x480 | 3.2 in | 180ppi HTC Hero | 320x480 | 3.2 in | 180ppi.
Designing for iPhone 4's Retina Display. 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. Everything they say about it is true: at 320 ppi, the pixels are just plain invisible. The crisp bright screen really looks as good as print, absolutely gorgeous. But what soothes the eye also adds headaches for designers. For three years, the iPhone came in just one flavor of screen resolution: the 3.5-inch screen was always 320x480 pixels. The new phone doubles the resolution to 640x960 pixels. Apple’s done some nice work under the hood in iOS 4 to make this transition as easy as possible, but designers still have to take on some extra legwork. I’ll Give You Two Pixels for That Point Starting in iOS 4, dimensions are measured in “points” instead of pixels. On iPhone 4, a point is two pixels; draw a one-point line, and it shows up two pixels wide.
Really? Boy Howdy, That’s a Lot of Icons. ProtoFluid. Rapid Prototyping of Adaptive CSS and Responsive Design. HTML5 Boilerplate, un template puissant et complet. HTML5 Boilerplate est un template (HTML+CSS+JS+...) lancé par Paul Irish (Modernizr) et Divya Manian. Il contient toutes les bonnes pratiques du moment en terme de performances, de compatibilité inter-navigateurs, de JavaScript, avec un soupçon d'accessibilité (si utilisé à bon escient), voire de Flash.
Une version sur-mesure peut être générée via Initializr. Vous retrouverez donc dans un zip tous les fichiers et sous-répertoires organisés pour débuter votre intégration avec d'excellentes bases. Bien entendu, vous l'aurez deviné, le but est de favoriser l'adoption de HTML, d'où l'inclusion par défaut de la librairie Modernizr, ainsi que jQuery via GoogleAPI (avec fallback local). Voici une liste des fonctionnalités supportées : Bien entendu d'autres sont à découvrir dans le code source, comme par exemples les indications pour les icônes Apple touch + favicon par exemple. Les meilleurs livres iOS.