How to make your web content look stunning on the iPhone 4’s new Retina display. 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.
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. 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. For backgrounds, you will use the same technique. iPhone 4 and iOS 4 Safari detection & behavior with CSS media queries, viewport and JavaScript timers. 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. 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. 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. 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. Targeting the iPhone 4 Retina Display with CSS3 Media Queries - WaltPad. 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.