I want to have a single version of my website for desktop and mobile. The tricky part is making the width of my product images as large as possible without being large enough to cause a horizontal scrollbar to appear. I had it just right for my wife’s iPhone 4 and my Android Galaxy Nexus, but tested on someone else’s Android phone and a portion of the site was off-screen to the right with a scrollbar. The phone I was using seemed to have a smaller and lower resolution screen than mine. Is there any way to come up with the right width without trying a whole bunch of different phones?
I have a saucelabs.com account and love the service but there doesn’t seem to be a way to do that there.
It would be useful to know more about your site. You can use the viewport meta tag in conjunction with @media rules to help your layout fit on any screen size. Often I set the content area to max-width: 98% or similar, and set the images to max-width: 100%.
Yes, we need to see the code you are using to style your images. For instance, are you sizing them with pixels or percentages?
<img src=“filename.jpg” width=“1200” alt=“Avoid using pixel widths”>
<img src=“filename.jpg” width=“100%” alt=“Use percentages for image widths.”>
For responsive images (this “max-width” part will keep their image width, but when the screen is smaller, will not overflow the div container):
Wow, that works incredibly well. The only problem is the aspect ratio of the images gets messed up when the width starts to drop and the height remains the same. Can anything be done about that?
EDIT: height:auto !
Stuff like this and stuff Ralph has shown me previously always makes me wonder what other CSS tricks are out there that I should really know about. I like the stuff that is really simple and degrades gracefully. There probably isn’t a better method of discovery than just stumbling across them though. I can’t justify pouring over the specs at this point.
The only drawback to this I’ve found is height:auto doesn’t allow for “placeholder” space where the image will load so the height of the page expands as the images load. Any way to fix that?