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
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.
Here's a weird one. I'm developing a responsive site here:
http://74.209.178.54:3000/index.html
There are three pages built so far: the home page, the "Why" page, and the "Pricing" page. The Home and Why pages are just fine on my iPhone 4. The "Pricing" page is really blurry. And I don't just mean the images are blurry - absolutely everything is blurry: text, borders, backgrounds...
Has anyone seen this before? Do you know what's happening?
This code in your CSS is causing the problem :-
#logos, #seen {
border: 1px solid #bbbbbb;
(around line 909 or 751 according to the comments.)
As you can see that the #logos is being used on the Pricing Page & the border given to it is on all of the sides - The page width is increased by 2px. Then the iPhone zooms in on the whole page when opened and blurry page stuff happens.
I'm pretty sure you know what to do but here goes :-
#logos, #seen {
border-top: 1px solid #bbbbbb;
border-bottom: 1px solid #bbbbbb;
I haven't actually tested this on a retina display iPhone but it should work.
The problem is the retina display of the iPhone 4. I had a similar problem when loading 2 buttons, they looked blurry (much more than your website) on the iPhone 4 but looked great on my 3gs (as well as your page). I have no idea what do you have to do to support the iPhone 4 retina display on your website, but i'll explain how works when programming in Xcode:
If you want to support retina and non-retina devices, you must have 2 versions of the same image. I recommend you to create first the retina image because it's easier to reduce (search on the Mac App Store for "resizer"). Well, the retina image must be named as that: yourimagename#2x.format. Your non-retina image, like that: yourimagename.format. Then, add both images on your project and when you want to load it, load the non-retina version. If the app is running on a retina device, the program will load the retina images.
That blurry effect is caused because the text is rendered in retina, and the images not. It's not a problem of images, it's just a problem of the resolution of the image. The retina images is 2x the size (width and high) the non-retina image, so the non-retina is the half of the retina. At first can seem a bit confusing, but you'll see that it isn't at all.
Hope I helped you. If you need some more help just ask!
The problem mysteriously went away - I have no idea what actually happened. The people who answered the question saw the site when the problem was gone.
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%;
}
}
I am developing a simple web page to be viewed after an iphone application completes. I am finding the safari degrades the image quality of the jpg so its all fuzzy.
The image is background image applied to a div
div.foo
{
background: url(../images/foo.jpg) no-repeat;
width:320px;
height:349px;
}
The width and height are exactly the same as the jpg image. Is there a way to make sure the image gets displayed in its full quality?
Found the answer. The iphone "optimises" jpg's, compressing them to minimise the file size but destroying the quality of the image. All the reading I did suggested there was no way to switch this "feature" off.
The solution is simple, switch to pngs.