How to make your web content look stunning on the iPhone 4’s new Retina display. The moment you first lay eyes on the iPhone 4's new Retina display, you are ruined. No other display will ever make you happy. Not unless it, too, is a Retina display. You start seeing pixels everywhere. My beloved MacBook Pro's screen? Retina changes everything The iPhone 4 really does change everything again and not just for phones. With the introduction of the Retina display, Apple has guaranteed the following three things: Vectors will play a central role in any graphic production pipeline.
Basically, if you want your applications and web sites to look beautiful on the iPhone 4's new retina screen, you're going to have to create high-resolution versions of your bitmaps and/or use vectors. What about images in web pages? Then, in the Retina-specific CSS, he loads in 32x32 icons as background images and specifies their dimensions in CSS pixels as 16x16 using the background-size CSS property. Demo I put together a quick demo using the same technique that you can test out.
Why 960 × 640. Monday, 19 April 2010 Ever since I hinted last month that this summer’s next-gen iPhones would sport double-resolution 960 × 640 displays,1 there’s been a strain of incredulous feedback regarding this suggestion — emails from readers who don’t understand why Apple would do this. The gist of the feedback, more or less, is that the existing iPhone already has a nice high-resolution display, so why would Apple bother adding a more expensive display when the existing one is already so good? Existing iPhone and iPod Touch displays offer 480 × 320 resolution, which, given a roughly 3.5-inch diagonal screen size, works out to about 162 pixels per inch.
(The various iPhone and iPod Touch models have ever-so-slightly different physical sizes, so if you want to be truly pedantic, the pixels-per-inch on the various units released to date have ranged from around 160 to 163. The difference is insignificant.) There are Android phones with 800 × 480 AMOLED displays. 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.
Designing for the iPhone 4's Retina display. Handling Retina Display in your web application (Page 1) - Tutorials - WebApp.Net Support Forum. If you like this tutorial, click "Like" in the top blue ribbon.Apple has introduce a brand new screen with the new iPhone 4 which holds 4 times more pixels that the screen of previous versions of the devices. In order for web applications to render correctly in Mobile Safari, the browser doubles the pixels of every elements of the page. If you rely on border radius or simliar CSS stuff, the elements will fit nicely on the screen, with smooth edges, but as soon as you use images and brackgrounds, pixels become visible and the display is a bit ugly. Anyway, you can benefit from the new Retina display also for images and backgrounds. For the former you just have to use an image twice as big as the original but set the size of the <img> tag to an half of the new image.
For instance if your initial image is 32x32, you have to produce a new one which is 64x64, with good quality -- do not just resize the smaller to bigger. Then you define your images the same way. Or even load a specific CSS: iPhone 4 and iOS 4 Safari detection & behavior with CSS media queries, viewport and JavaScript timers | Mobile Web Programming. As you may know, iPhone 4 was released a few days ago; I didn’t buy an iPhone 4, but I’ve just been in Apple Store San Francisco making some testing over iPhone 3GS with iOS4, iPhone 4 and also with my iPad (iOS 3.2) and iPod Touch (iOS 3.1).
After that, I’ve found many interesting behaviors that worth to be mentioned here. Unfortunately, there is no official documentation in Safari Guidelines for iPhone 4 yet to listen an official version. “This changes everything”, a great quote for starting my post In the following lines you will find analysis on CSS Media Queries, Viewport, JavaScript, performance and webapps behavior with iPhone 4 and iOS 4. CSS Media Queries in iPhone 4 iPhone 4′s screen has 326 PPI (or DPI if you like) with a 640×960 screen. As you may know (if not, look at my book ), Safari on iOS supports media queries, so many sites created a different CSS code or external file for iPhone.
WebClip icon for iPhone 4 JavaScript window size Viewport in iPhone 4 Rotation media support. Device screen resolutions ordered by OS. Its often a chore to track down what screen resolutions are supported by the various operating systems and devices that are commonly used on the Web. Vendor sites and developer guidelines are often helpful, but it means hunting down information across many sites and documents. Sites like GSM Arena are great, but it often means checking devices one at a time, and useful information for web developers are lost amongst the densely packed information that is of limited concern to us.
As I was researching this information anyway, and I’m a bit of a data nerd, I thought I may as well catalogue the information on my blog for easy access at a later date. If the information is of use to anyone else, then all the better. I’ve grouped the data by operating system, version, and device type, as I wanted to see what resolutions needed to be supported to broadly cover a particular OS. Without further ado, here is the data: Smartphones iOS: iPhone and iPod Touch Android Cupcake and below Donut and above Bada. Preparing your iPhone App for Higher Resolutions. With the iPad and the new iPhone 4 gaining popularity, it seems that iOS devices are quickly heading towards higher resolution displays.
Higher resolution screens obviously make for a better user experience, but in order to take advantage of this, developers need to update their applications. This article will explain what all the fuss is about, and how to make your applications look good on higher resolutions by demonstrating two techniques for graphics optimizations. Resolution, Screen Size and the Retina Display The iPad has a bigger screen, and so it has a bigger resolution. With the iPhone 4, however, Apple did something different: they increased the resolution without changing the physical size of the screen. This makes for a higher pixel density, pixels are smaller and more tightly packed. On the iPad, where both the screen and the resolution are larger, Apple has allowed for “Pixel Doubling”, which blows up your applications to 4 times its size.
Applying the Images Using Scaling. Safari Web Content Guide: Optimizing Web Content. The first step in optimizing web content for iOS is to separate your iOS-specific content from your desktop content and the next step is to tailor the web content for iOS. You might want to follow these steps even if iOS is not your target platform so your web content is more maintainable in the future.
Use conditional CSS so that you can create iOS-specific style sheets as described in “Using Conditional CSS.” You can also use object detection and WebKit detection as described in “Follow Good Web Design Practices” to use extensions but remain browser-independent. Only if necessary, use the user agent string as described in “Using the Safari User Agent String” to detect Safari on iOS or a specific device.
After optimizing your content, read the rest of the chapters in this document to learn how to set viewport properties, adjust text size, lay out forms, handle events, use application links, and export media for iOS. Using Conditional CSS Listing 2-1 Screen-specific style sheet. 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. But what about images? In order to preserve the design of existing websites, images are automatically pixel-doubled. 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. See also: The deal about retina displays - Round Edges. When Apple announced the iPhone 4 yesterday I was shocked to hear that its display has a pixel density of 326 pixels per inch. That’s an incredible number. Steve Jobs was quick to say that this is more than a human eye can resolve. He called it a retina display. The vocabulary and units used in the discussion about the iPhone’s greatness are somewhat exotic, so let’s see what this is all about. Pixels per inch (ppi) is the unit expressing how densely pixels are placed on a visual display unit. The iPhone 4 has 960 x 640 pixels on a 3.5 in display (aspect ratio: 3 to 2). So based on the definition of pixel density (pixels / inch = ppi) we can calculate how large one pixel is rendered on the iPhone 4: 960 pixels /(326 ppi * 960 pixels) = 0.00307 inches or 0.07791 mm.
Just for comparison: the size of a pixel on a standard 19-in LCD monitor (aspect ratio: 5 to 4) running 1280x1024 pixels is 0.01159 inches or 0.29441 mm (almost 4 times larger). OK, that’s what the iPhone 4 is providing.