I have this UIWebView on my app that shows a local html file. Do the images on that web view follow the #2x rule? I mean, if I build both, the regular and the #2x images will the webview load the retina ones for the iPhone 4?
remember that the images are being loaded by the HTML tag , not by any UIImage method.
thanks.
Nope. It's not too hard to roll your own though, as WebKit supports this CSS rule:
#media only screen and (-webkit-min-device-pixel-ratio: 2) {
/* this is a retina display device */
}
You can also use the -webkit-background-size and the usual width and height selectors to ensure the images display at the correct physical size.
Jonathon Grynspan is correct. I recommend reading Aral Balkan's tutorial on the topic. This was what I read when I implemented #2x graphics for a recent mobile site:
How to make your web content look stunning on the iPhone 4’s new Retina display
No, I just tried an experiment and the UIWebView did not pick up the #2x image.
Maybe my answer to a similar question is interesting UIWebView and iPhone 4 retina display. It uses Javascript to load scaled images and set the width properly.
The best solution i.m.o is to always load a retina image, and set the size to 50% for the image. It will look good on retina and non-retina displays. Should be sufficient.
Related
I am looking at writing some custom UITableViewCells that have a UIWebView squirted into them. I want to have a couple of icons that will appear in the html of the uiWebview, the images are stored locally on the device.
I would like to know if these are then treated like normal images when building for different devices. I.e. following the naming convention #2x.png for retina displays?
dose this translate over to uiwebviews or not?
A UIWebView is there to interpret and display whatever the HTML tells it to. In short the answer is NO, a webview will display the EXACT linked image to screen. I have implemented UIWebViews in apps I have developed, that display nothing more than internal HTML. What I do with these, is simply provide the 2X image and let the webview handle the sizing.
Another way to go about this would be to internally recognize (and it is possible) if you are working on a retina display and provide HTML that calls out #2x images. So you would essentially provide myhtml.html and myhtml#2x.html and perform the retina recognition yourself.
You need to use CSS and media queries to tell the web view to display your #2x image. You then also need to set the desired size explicitly.
So, assuming you have a background image that is 25px normally and 50px #2x then you'd do something like this for a retina display:
#media only screen and (-webkit-min-device-pixel-ratio: 2) {
.nav-bar-button-right button .button-icon {
background-image: url(myImage#2x.png);
background-size: 25px 25px;
}
}
Adjust this for your usage but that's the idea. I hope it helps.
I just started reading about Retina Display on the iphone 4+ and I would like to know if right now all these iphones4+ are displaying images 2x the normal size on web pages if you don't have a the imagefilename#2x.extension ?!
This would be a huge headache if I have to wrote all that extra code like media queries and add #2x after every background images...
If so, what are your swiftest solution?
Thank you.
The file name has nothing to do with your web site. You can name your image files anything you want. The '#2x' is just an informal standard many use for retina web images. If you want retina images to be used, you can use the media query to swap out the images via CSS with the higher resolution versions.
http://benfrain.com/how-to-serve-high-resolution-website-images-for-retina-displays-new-ipadiphone4/
Mobile Safari interprets px as points and you therefore don't need to do anything for your app to work on a retina device.
If you want to provide high-res images though, wrap it in a CSS media query:
#media all and (-webkit-device-pixel-ratio:2) {
#id {
background-image: url(background#2x.png);
background-size: 100% 100%;
}
}
In iphone4 images are not showing in high resolution its shows low resolution images.
How to change high resolution images for iphone4 using css?
To clarify, we are developing in phonegap using html and jquery The high-res images end up pixelated in the application. The .png images have the designation of #2x.png and the raw files match the png files.
We have utilized the practices in
http://aralbalkan.com/3331
and
http://davidehlers.com/2011/03/iphone...
The images appear slightly smaller than the raw images are, and significantly pixelated. I have attached an overlay of the issue that Venky is referring to. This is the buttonsml#2x.png on the right, placed on top of the screenshot of the app from an iPhone4.
Not sure about CSS but in normal way you can append "#2x" to normal image name and that would be goes for Retina Display. So may be you don't need to mention that in CSS and just put #2x in image and add it in to the project. For example for icon.png it would be icon#2x.png.
Hope this help.
I've gotten this to work by using the #2x versions in the image tags, and specifying a width/height that's half the size of the #2x image. For example, with a 200 x 80 "item#2x.png", I'd use:
<img src="item#2x.png" width="100" height="40">
It works well inside a UIWebView. Not sure about doing it with CSS though.
You have to use high resolution images. The SDK will automatically select the high resolution version (#2x) if you load the image in code (UIImage imageNamed), but if you are doing through any other method you will have to do it yourself.
I have an app and would like to make it retina display friendly.
How exactly does the process work? What images need to be added apart from what I have?
I know the sizes should be different, but am not sure on the details?
What else needs to be done to handle retina display?
Should the device be detected and use other images if the device supports retina display?
What if there are a lot of images? And how will this effect the app size?
Thanks
A good guide to this can be found here: http://mobile.tutsplus.com/tutorials/iphone/preparing-your-iphone-app-for-higher-resolutions/
In general you just create 2 sets of images. Your original and then a new one twice as big with #2x in the name. So for image.png at size 32x32 you would have one that is twice the resolution called image#2x.png at size 64x64. In your app just always use the image.png in Interface Builder and when loading in code.
There is no need to detect the device. These images will automatically be picked up by the OS and subbed in as necessary.
good articles if you're using sprites
http://weedygarden.net/2012/04/hi-res-retina-display-css-sprites/
The main thing about working with retina image is that image name convention.
And the size of image should be 2times greater than regular1.
Example- if your icon name for regular is icon.png then it should be icon#2x.png for
retina.And second thing is size for regular is 72*72 then it should be 144*144 for Retina.
It might be helpful for you.
Thnks
I've installed my iPhone app on an iPad. When I tap this "2x" button, the app gets scaled up, but it doesn't use my retina display graphics. Isn't that somewhat stupid? I am sure I did something wrong!
What must I set in the info.plist or elsewhere that the iPad will use my retina display graphics when the app is watched in 2x mode?
No, it literally just scales up the screen. It may be a bit lame but that's by design. Note that even the text is pixel-doubled.
If you want to make better use of the screen you have to make a "Universal" app.
If you use a hi-res image (not called #2x) in your app, then size the UIImageView half the size of the image it will appear crisp on the iPhone, retina, and iPad scaled up.
Please make sure your retina image naming convention is correct.
For retina image naming convention should be #2x.Suppose if your regular image name is like
icon.png then for retina it should be icon#2x.png.