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.
Related
I have a really simple portfolio site (sample page: http://stevebishop.org/images/a_working_title/index.html) and I've made a responsive design that loads a 'mobile' style sheet that loads instead for the iPhone sized screen.
The only css really in the code for either is on regular style sheet the images are scaled 100% height of the screen and for the mobile they are 100% width. The intention being to have the largest possible image for each device with an image fitting on the screen all at once.
This all works fine, except the problem is with viewing on iPads - as they should act like desktops and load the regular css file but they don't seem to be able to handle the height: 100% attribute and instead display each image as very very big.
Does anyone have any suggestions as to how to change the code to something more stable, or to work a way around loading the 'mobile' css file for the iPad without it interfering with small desktops which I think it would.
Thank you.
Besides using width: 100%, you can use the properties for example max-width: 400px and max-height:200px to prevent the image is very large.
Hope that helps some.
Regards.
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%;
}
}
I have a website that requires a very large background image. The page loads correctly in all web browsers I have tried except the Safari on the iPhone and the iPad. In Safari on these two mobile devices the background only covers the left 50% of the page.
From all the testing I have done I can tell that is because of the length of the background image I am using. This is my css:
#bodyLong
{
background-image:url('/Images/TaylorProductsBackground3459.jpg');
background-repeat:no-repeat;
width: 1150px;
height: 3459px;
margin: 0 auto;
text-align: left;
padding: 0px;
position:relative;
}
I know that there is something specifically wrong in this case because if I make one change to the CSS and set height: 1000px;, the background image is no longer shown twice across the back of the page. What can I do to fix this? I would prefer not to use such a large image but it is a client request and I have not been able to convince them otherwise.
I think you are running hard into a limit of the iOS version of Safari. Check all the doco on creating web pages for mobile devices and you might find something about image size limits.
Check the answer here: Image size limitations in mobile safari?
Possible solutions might be to use a smaller image size and scale it up if detail is not important, or to break up the image and tile it.
But seriously, why would you need a 3500px sized image as a background. Bad idea(TM)
I know there has been some talk about large images not rendering well on the new iPad because of a limitation in WebKit. The workaround is to use progressive Jpegs. Try saving your image as a progressive Jpeg and see if that fixes the problem.
You need to make sure the image matches the screen resolution and you need to make sure you retina and non retina sizes
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.
I have set up a web page to look good on the small screen of an iPhone, but when viewed on the desktop, and going right across the width of the browser, it looks terrible. Is there a way I can restrict the width to say, 480px when viewed on a big screen?
I tried
body {
margin-left:auto;
margin-right:auto;
max-width:480px;
}
but it seems to just set the width at 480px, even on an iPhone on portrait mode.
I think Media Types are what you're looking for.