Jquery if screen size is change image

petewinter
petewinter used Ask the Experts™
on
I want to change the image source if the screen size is either the width of an iPhone or iPad when viewed vertically. How do I do this?

See my attempt below of an iPhone.

JQuery
if( $(window).width() = 320)
{
  $("#bg").attr("src").text("images/the_oaks_bg2.jpg");
}

Open in new window


HMTL
<img src="images/the_oaks_bg.jpg" id="bg" alt="The Oaks Lodge">

Open in new window


What am I doing wrong?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Technically, this would be more correct (if you're specifically trying to target the iPhone)
if( $(window).width() < 321)

Open in new window

or if you want to target most handheld devices not in landscape mode
if( $(window).width() < 480)

Open in new window

But the more important issue is that your method is not a kosher method for serving different content for different devices. If your intent is truly to serve different content (different image) then it should probably be done with server side scripting, not Javascript. If your intent is to provide a different user experience specifically for devices, I would suggest using CSS Media Queries.

In that case, you would want to try and restyle the image (crop, or use image sprites for different images). For example:

/* This targets most handhelds that are not in landscape, override default styles with this */
@media screen and (max-width: 479px) { 
	#bg {
		background-position: x y; /* sprite coordinates */
	}
}

Open in new window

or
@media screen and (max-width: 479px) { 
	#bg {
		max-width: 100%; /* allows image to scale down in most browsers (forces to width of it's container) */
	}
}

Open in new window

or you could be more ore less specific like
/* iPhone */
@media screen and (min-device-width: 320px) and (max-device-width: 480px) { ... }

/* Phones and Tablets */
@media all and (orientation:portrait) { ... }
@media all and (orientation:landscape)  { ... }

Open in new window

Author

Commented:
Thanks for the reply and advice, but I am currently using the below jquery to stretch the image to full screen, but the image I am using does not work well when viewed as portrait on an iPhone or iPad so I would like to change the image.

$(window).load(function() {

	var theWindow        = $(window),
	    $bg              = $("#bg"),
	    aspectRatio      = $bg.width() / $bg.height();

	function resizeBg() {

		if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
		    $bg
		    	.removeClass()
		    	.addClass('bgheight');
		} else {
		    $bg
		    	.removeClass()
		    	.addClass('bgwidth');
		}

	}

	theWindow.resize(function() {
		resizeBg();
	}).trigger("resize");

});

Open in new window


How can I both stretch the image to full screen, plus change the image if viewed as portrait on an iPhone or iPad? The image looks fine as landscape on these devices.

Author

Commented:
View the link if it helps: http://www.theoaksguesthouse.co.uk/
What you're doing works, but you could still solve your problem by using only CSS Media Queries. Just use a background image on a div (which will load faster, too) instead of an <img>, and use a Media Query to load a different background image for screen sizes fitting devices below your threshold and/or portrait mode, and for everything else use your default styles to specify the larger image and use background-size: 100% to force the background image to scale to the size of the div, so long as the div is set to max-width: 100% and not constrained by it's parent.

I suppose you could still use your existing JS to stretch and also use Media Queries just for the smaller sizes if you wanted to.

Author

Commented:
Many thanks

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial