Menu
I'm making a mobile web app and am having some trouble with my images. They look great on my desktop but all blurry in the iPhone. I guess it's cause' of the retina display and that mobile safari needs to double the size of the web sites.
Is there a workaround to get the images to appear crisp on the iPhone 4?
297
In Safari on iOS, there is a known limitation when displaying large PNG and GIF images. The issue is triggered by the overall number of pixels in the image, so even if an image is narrow, you can experience blurriness if the image is tall enough. This affects both the iPad and iPhone and affects all models of device.
If your Photos and Videos are stored in iCloud and you share it before downloading the original then it may appear blurry but it is not. Your photos and videos are stored on your device in their original, high-resolution version. This means that they use a lot of space on your iPhone, iPad, and iPod touch.
Once you send something via SMS, your carrier gets involved and that data gets terribly compressed. While data compression affects all images and videos, it typically impacts larger or high-quality images the most. Videos are also heavily affected, and usually, end up extremely blurry and unwatchable.
I have found the answer. I found this article: http://seesparkbox.com/foundry/targeting_iphone_4s_retina_display_with_media_queries Which advocates using media queries like this:
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
#map-page .ui-icon {
background-image: url("/images/retina/4_ikon_hitta.png");
}
}
This works for now but i not an optimal solution. In the comments of another article there where talk about not using pixels as a measurement at all, which made perfect sense. The iPhone4 is just the first of many high dpi-devices to come. So a pixel will be even more sizes in the future.
Mobile Safari have since ios 2.1 support for SVG so depending on what devices you have to support SVG (maybe with some fallback) is something to strongly consider.
For my (and yours too!) next project I'm digging in to ems, points, % and SVG.
61
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With