Question

this site in development look fine in many different browser except on my iPhone4s safari browser. For reason i don’t know, the full width image at the top is “scale”

site in question : http://studioteknik.ca/stada/

The question is, why the scaling append, and what to do to get it perfect as in desktop browser.

Other sub question : do you know a library that can help make mobile and destop look the same, i mean for image but for text sizing.

The question is not localized or precise, it’s a development question for crosse browser compatibility. Thanks in advance.

And BTW, i test it in iPhone emulator online, witch they all pretty much sucks, and don’t really show reality, but they show all the site correctly! so i am more mystify that anything else (as opposed to being help)

To prove my point, here is a screen capture of my iphone render : http://studioteknik.ca/stackoverflow_question/stada.jpg

Answer 1

Goggling for the right thing (resized sprite on safari iphone) lead me to the right answer. Here is the solution and some other site i have found interesting, helpful information.

from : http://www.teknocat.org/blog/web-development/show/6/mobile-safari-background-image-scaling-quirk

It turns out the reason for this is a resource limit on the iPhone - the amount of memory an image can use once downloaded and opened. This same limit applies to mobile Safari on the iPod and iPad. Note that this limit is nothing to do with the file size. The maximum limit for images is 1024x1024x3 (3,145,728). If the width and height dimensions of your image multiplied together exceed this value, the image will be down sized. The result can vary depending on the viewport size (whether you're on an iPhone or an iPad).

and more resources :
http://www.thecssninja.com/css/high-res-sprites

http://coding.smashingmagazine.com/2012/08/13/coding-qa-with-chris-coyier-responsive-sprites-responsive-font-sizing-media-query-efficiency-more/

http://www.studiopress.com/design/css-background-size-graphics.htm

http://perishablepress.com/target-iphone-and-ipad-with-css3-media-queries/

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/