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.
Related
So, how do they look? Tiny? Does chrome/the OS scale them up? I'd like to publish an app but I don't have a high dpi screen to test this things out and I'm really curious about it.
If they in fact look tiny, would a device-pixel-ratio media query that sets the html font-size fix it? All my units are set in rems, no images and only a few text.
Chrome apps generally look great on high-DPI screens -- just as Chrome itself does.
Even if your CSS specifies all dimensions in px, those are CSS pixels, and adapt to the display based on the device-pixel-ratio.
With rems, and no images, your app should look much better on a high-DPI display than on a standard one.
Low-DPI Images on a high-DPI screen can look pixellated -- not because they are tiny, but because they have been scaled up, and they are being presented beside crisply rendered text. For those cases, there are techniques that you can use to present high-resolution images to those displays, and standard images to others.
The other issue to be aware of is drawing with a <canvas> -- if you want a sharp image, you have to remember to scale the canvas area by device-pixel-ratio, and scale up all of your coordinates the same way as you draw.
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 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 been doing a bit of testing with images today and found that I could not make a blurry PNG image, which looked fine on my desktop appear non-blurry on the iphone without doing some strange things.
It wasn't until I made the images twice the resolution, then resized them within the iphone that they appeared crisp on screen. Is that normal practice?
What say if you have a background image that you want to be non-blurry? I don't see how I can do something like upload a background image and tell it to run at half the size...
Thanks for any pointers!
I found the answer.
It turns out that pixels are not the same on the iphone and are actually at a higher resolution.
In order to make images non-blurry, I needed to basically upload images 2-3 times regular size and then make their size smaller within the CSS.
For example, if I wanted a 50px image, I uploaded a 100px image and styled in within css to have a width of 50px.
It looks like the new iPads have even higher resolutions which means you may even want to upload higher resolution images to cater to those.
A bit lame I think, but it does look nice.
I might be misunderstanding you, but if you'd like to present a crisp image on a retina phone, you can place it in a UIImageView half it's size and set the contentMode to scale to fill.
You can see the problem at myspace.com/dejaentenduband
on an iPhone, the background image is shrunk by what appears to be nearly 50%
I haven't had this issue on on other browser. I'd expect the background to simply be cropped where it doesn't fit the screen.
Since it is unusual behavior, and apple must realise this, I'm hoping there is a pure css or HTML based solution. Should I be defining something differently or giving my page's body a particular attribute?
turns out that this has nothing to do with the viewport.
there's an article on it here:
http://www.defusion.org.uk/archives/2010/02/19/shrinking-large-background-image-bug-in-iphone-safari/
one of the limitations of an iphone is stated by Mac:
http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html
JPEG images larger than 2 megapixels are subsampled - that is, decoded to a reduced size
Maybe you need to configure the page's viewport.
If the background image is taller than 1000px it will resize to the width of the viewport. Try reducing the height and see if this has an effect.
I just found out the easiest fix for this. Just open the image through Photoshop and save the image using the "Save for Web & Devices"..
Here is the easiest fix of ALL:
Open Fireworks, export your image as a 32 bit png, and use that png in your background. IOS doesn't scale THAT. Works like a charm, and the size is about the same as a jpg with 100% quality (slightly smaller actually)