Click it. :)
iOS 4 has an annoying bug for web app developers. If you use the
apple-mobile-web-app-capable feature to indicate that your site should launch as it’s own app rather than open in Safari, the OS creates a low-resolution version of your apple-touch-icon on the home screen:
The app on the right uses
apple-mobile-web-app-capable. The app on the left doesn’t. They were both generated from the same image.
Update: Finally fixed in iOS 4.1!
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. And this creates a schism between “device pixels” and “CSS pixels”.
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. However as we enter this new high DPI world where the entire UI may be magnified, a CSS pixel can end up being multiple pixels on screen.
For example if I set a zoom magnifcation of 2x, then 1 CSS pixel would actually be represented by a 2×2 square of device pixels.
This is exactly what’s happening on the iPhone 4.
So the question for web developers becomes, how do I update my website’s images with higher resolution versions for high DPI devices? Or better yet, how do I do all that in a way that degrades gracefully?
Apple’s Safari Web Content Guide has long recommended using CSS3 media queries to conditionally include stylesheets for specific device widths. But Hyatt’s post mentions a new feature,
device-pixel-ratio, for targeting specific pixel densities.
I tried that new feature out by adding this line to my little mobile website1:
<link rel="stylesheet" type="text/css" href="/css/retina.css" media="only screen and (-webkit-min-device-pixel-ratio: 2)" />
This tells browsers to include “retina.css” only if the device pixel ratio is 2 or higher. (The feature seems to only be available via the
-webkit extension for now.)
The “retina.css” file overrides the background images of some of my site’s graphics with higher resolution versions and uses the
background-size property to set the correct CSS pixel dimensions. (I use Komodo Media’s Social Network Icon Pack and Mark James’ Silk icons for many of the graphics.)
High DPI devices represent an exciting opportunity for web developers to do some amazing things and this example only barely scratches the surface.
My new iPhone arrived a couple days early. It’s very thin. It’s very fast. And the screen is absolutely incredible. :)
The back feels like glass. (Which it is.) It’s smoother. Feels more like the original iPhone than the 3G and 3GS.
The whole thing feels warmer. (Because it’s thinner?)
The pixels on the display I use at work look comically large now.
The Camera app can take photos and shoot video using the front-facing camera. (Which now seems obvious.)
Activation was a breeze.
I wonder if it’s possible to write an app that could take pictures or shoot video in both directions at the same time. That would be interesting.
I’m writing this bullet in the TypePad mobile web app. Stuff like the text, CSS gradients, and rounded corners all scale beautifully. The images need to be remastered obviously so I’ll look into that. It’s also interesting that the Canvas-generated graph didn’t scale but it must have specific dimensions which are being resized, like a graphic.
Safari seems to do a better job of keeping pages in memory. Hooray for more RAM!
A couple of people have said it feels heavier but it seems the same to me.
The “Retina Display” is going to be fantastic when it inevitably comes to the iPad. :)
The app store really needs a “Retina”-ready page for listing HD apps.
It definitely runs warmer than previous iPhones. Not uncomfortable, but noticeable.
Wednesday night, for the first time in who-knows-how-long, I stepped onto the scale at the gym, slid the heavy weight over to 220, and it dropped. Which means that I’ve lost somewhere between 20 to 25 pounds in the past eight months. And that might not be very fast or very much, but if you’ve never made a concerted effort to lose weight before, it’s kind of amazing.
My incredible system for losing the weight has been a combination of… wait for it… diet and exercise. The diet side is mostly about avoiding all soda, hardly any fast food, and a lot more steamed vegetables. The exercise side is mostly about a concerted effort to start running, for the first time in my life.
A few weeks ago I ran (or rather, mostly ran) in my first race. A few months before that, shortly after tweeting about how I’d reached a point where I was able to “run” (run/walk) four miles at a stretch, my friend Nick suggested I run a 5k. I thought that would be a good thing to do so I tried to find one but never really got serious about it.
Then my brother (who’s training for the San Francisco Marathon) suggested we run the Marin 5k on Memorial Day. But by that point, I was getting cocky and 5k seemed a little too easy. So I suggested the 10k. We invited the rest of our family and a bunch of us met up for the race. (Thanks again guys!)
I came in 507th and dead last in my age group but I achieved my only goal which was to cross the finish line before they took it down. (They take it down only a little over an hour after the race begins.) We got some very nice shirts for finishing and I avoided passing out or throwing up so on the whole I consider it a victory. :)
Onward to 200!
I’ve already received multiple emails from people who are excited for iOS 4’s multitasking because they can’t wait for this to finally stop being an issue, because they think Instapaper will be able to download articles periodically in the background.
It’s painful to respond, crushing their hopes, to tell them that the iOS multitasking system doesn’t allow me to do that.
I was very sad that periodic network requests weren’t included when Apple announced iOS 4 “multitasking”. Fast app switching, local notifications, and the rest are nice but allowing apps to occasionally access the network even when they’re not running would be huge.
Add this to your
[diff] tool = "bbdiff" [difftool] prompt = false [difftool "bbdiff"] cmd = /usr/bin/bbdiff --wait --resume "$LOCAL" "$REMOTE"
And use Git’s difftool command:
git difftool [<path>...]
Huge thanks to Tim Gray.