Many web developers prefer to keep as much control over the applications, especially when it comes down to how the application displays on a mobile device. I’ll often see developers prevent zooming in mobile browsers, allowing them to manage display size:
A useful snippet for any mobile developer. Another useful snippet, this one a small CSS helper, ensures that your images don’t exceed the fixed width on mobile devices:
/* iphone */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
img { max-width: 100%; }
}
/* ipad */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
img { max-width: 100%; }
}
By setting the max-width property of the image, the image cannot bleed to the right of the page, regardless of its size. You can add that same max-width property to images when it comes time for print too:
@media print {
img { max-width: 100%; }
}
Keep this snippet handy for your current and future mobile web and print endeavors; it’s just another CSS directive to show your mobile and print users that you care!Images, max-width, and Mobile is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.
