Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Aug 2011
    Posts
    82
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Two different versions of an image: one for desktop, one for mobile...how to code it?

    I've been told by a number of people that I can have a higher and a lower resolution version of an image and do something in the coding that makes one of them load if it's a regular computer and the other one load if it's a mobile device. I have Googled and can't find how to do this.

    My mom is dead-set on using several images on the mobile version of her site, which is making the site too big according to the mobile validator that I ran the site through. I made low-res versions of the images, but don't know how to set the site to load the right one. I know how to *hide* one or the other, but apparently even if the css lists an image as "display:none;" it still loads the image and counts toward the size of the page.

    Very frustrated, please help!

    >^,,^<

  • #2
    Regular Coder Kevin_M_Schafer's Avatar
    Join Date
    Apr 2011
    Location
    Fairfax, Minnesota, U.S.A.
    Posts
    482
    Thanks
    97
    Thanked 17 Times in 17 Posts
    Hi OpalCat,

    I'm still learning this, too, but I have found something to use that seems to work, but it uses javascript. I think it would be good for us to learn about @media css so that without any help from a script the different css codes will load. Even though I'm learning, I still like to feel like I am actually learning and expanding my possibilities at the same time. If you want to try this, simply copy it just beneath your meta tags at the top of your page.

    It's a sniffer script. All you need to do is create two different style sheets (I've named mine "desktop" and "mobile." Original, huh? lol!)

    If you go to my main site here with a desktop computer, it will look normal. If you visit it with a smartphone, you won't notice it, but it's running off entirely different css. One thing to keep in mind, where a normal page would use font sizes such as 14px, a mobile site will use font sizes such as 36px -- for the same line of text. So far, I've determined that we need to make things bigger for mobile devices. Even though they have smaller screens, they're still displaying in screen resolutions comparable to desktop PCs. The reason being, an individual pixel on a mobile device is much smaller than a pixel on a regular monitor.

    Here's what I'm using now, at least until I learn more:
    Code:
    <link rel="stylesheet" type="text/css" href="YOUR_URL/desktop.css" />
    
    <script type = "text/javascript">
    		var sniffer=new Object();
    		var agentNow=navigator.userAgent.toLowerCase();
    		sniffer.android=(agentNow.search("android")>=0);
    		sniffer.series60=(agentNow.search("series60")>=0);
    		sniffer.iphone=(agentNow.search("iphone")>=0);
    		sniffer.blackberry=(agentNow.search("blackberry")>=0);
    		sniffer.windowsce=(agentNow.search("windows ce")>=0);
    		
    		for(var mobile in sniffer)
    		{
    		if(sniffer[mobile])
    		{
    		document.write('<link rel="stylesheet" type="text/css" href="YOUR_URL/mobile.css">');
    		break;
    		}
    		}
    		
    		</script>
    Notice how it works. All browsers read the first css call line. However, only the mobile devices thread themselves through the css to arrive at the mobile css -- designed just for them.

    --Kevin



    .
    Last edited by Kevin_M_Schafer; 01-03-2012 at 12:13 AM. Reason: text
    My keyboard is an IBM from 1993 and I like it that way. | Who is Dan Well? Everyone always says I know Dan Well.Building a web page is like building a birdhouse. Put it up there and watch 'em come. | Maintaining the aspect ratio of an image is more important than having a cold orange pop.

  • #3
    New Coder
    Join Date
    Aug 2011
    Posts
    82
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I actually have two separate set of pages on two different domains for the regular and mobile site, though all the content is via includes and those are in a folder that has a simlink on the other site's folder, so to change content on both sites I just edit the include file in one place. There is one style sheet for the regular site and a different file for the mobile site. I had to make a second set of pages though, because of the images used in the layout--I could hide them via CSS but not make them not load. That's the problem I'm having with the images she wants to have on the mobile site, too--I can hide it via css, but the browser still loads it, so if it is, say, a 15kb image, even though it doesn't show, the size of the page increases by 15kb. Apparently mobile pages aren't supposed to be more than, I think, 20k total. That's what the validator I used said, anyway.

    Also, apparently most mobile browsers don't use javascript, so a javascript solution won't work.

    By the way, you mentioned font sizes in px... from what I've read it's bad to use fixed sizes for anything on a mobile site. Use either percentages or ems. So for font size on my mom's site I use 1.1em and it works pretty well. (The validator kicked it out as an error when I listed a font-size in px.)

    So anyway, I don't need a script or anything to detect and use a different css because the relevant pages already reference the proper css file. I would like a way to detect if it's mobile and automatically load the mobile site's url, though. That would be handy. Right now I just have a button at the top that says "Mobile site click here."

    But mainly right now I want to know the code you put in the IMG tag that loads one image if it's a normal browser but a different image if it's a mobile browser. I know I've seen the code before--recently, too--I just can't remember where or what it was, and can't find any Google search terms that pull up anything like what I need.

  • #4
    Regular Coder Kevin_M_Schafer's Avatar
    Join Date
    Apr 2011
    Location
    Fairfax, Minnesota, U.S.A.
    Posts
    482
    Thanks
    97
    Thanked 17 Times in 17 Posts
    Here's the code generated by CodingForums VIPStephan about a month ago or so. Copy this into a blank page and view with your browser. Drag the right side of the active browser window in and out and watch the colors change. I think this is what you're looking for. You can apply this to your site, and have different sizes of your images swap out based upon the width of the window. I think this is the correct way to go -- over using a dead-in-the-water script if scripting is disabled.

    BTW: thank you for the heads up on font sizes for mobile. I'm looking into that now that you've mentioned it. Thanks!

    Code:
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    	<head>
    		<title>CSS3 media query test</title>
    		<meta charset="utf-8" />
    		<meta name="description" content="" />
    		<meta name="keywords" content="" />
    		<style type="text/css">
    		#div1 {
    			height: 100px;
    			width: 45%;
    			background: lime;
    			float: left;
    			padding: 10px;
    		}
    		#div1:after {content: "float: left;";}
    		#div2 {
    			height: 100px;
    			background: red;
    			padding: 10px;
    		}
    		@media screen and (max-width: 800px) {
    			#div1 {
    				background: aqua;
    				float: right;
    			}
    			#div1:after {content: "float: right;";}
    			#div2 {background: yellow;}
    		}
    		@media screen and (max-width: 500px) {
    			#div1 {
    				float: none;
    				background: maroon;
    				color: white;
    				width: auto;
    			}
    			#div1:after {content: "float: none;";}
    		}
    		</style>
    	</head>
    
    	<body>
    		<div id="container">
    			<div id="div1">div 1</div>
    			<div id="div2">div 2</div>
    		</div>
    	</body>
    </html>
    --Kevin

    .
    Last edited by Kevin_M_Schafer; 01-03-2012 at 12:10 AM. Reason: text clarity
    My keyboard is an IBM from 1993 and I like it that way. | Who is Dan Well? Everyone always says I know Dan Well.Building a web page is like building a birdhouse. Put it up there and watch 'em come. | Maintaining the aspect ratio of an image is more important than having a cold orange pop.

  • #5
    New Coder
    Join Date
    Aug 2011
    Posts
    82
    Thanks
    2
    Thanked 0 Times in 0 Posts
    That code doesn't have anything to do with displaying inline images, though.

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,917
    Thanks
    6
    Thanked 1,040 Times in 1,013 Posts
    Yeah, media queries don’t quite do the trick if you have HTML images. They are cool with CSS background images but <img> elements always have the same image path in the src attribute’s value, regardless of device. Although I don’t like user agent sniffing this would probably the best choice here. And if you don’t want to use JavaScript then I think you can also do a UA check with PHP (serve different content on the same site/domain) or with .htaccess (redirect to separate mobile site/domain).

  • #7
    Regular Coder Kevin_M_Schafer's Avatar
    Join Date
    Apr 2011
    Location
    Fairfax, Minnesota, U.S.A.
    Posts
    482
    Thanks
    97
    Thanked 17 Times in 17 Posts
    I guess I didn't think of that VIPStephan, but you're right. I was successful with media queries while using images because I was calling them and implementing them with css. Thanks for the reminder.

    --Kevin

    .
    My keyboard is an IBM from 1993 and I like it that way. | Who is Dan Well? Everyone always says I know Dan Well.Building a web page is like building a birdhouse. Put it up there and watch 'em come. | Maintaining the aspect ratio of an image is more important than having a cold orange pop.

  • #8
    New Coder
    Join Date
    Aug 2011
    Posts
    82
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by VIPStephan View Post
    Yeah, media queries don’t quite do the trick if you have HTML images. They are cool with CSS background images but <img> elements always have the same image path in the src attribute’s value, regardless of device. Although I don’t like user agent sniffing this would probably the best choice here. And if you don’t want to use JavaScript then I think you can also do a UA check with PHP (serve different content on the same site/domain) or with .htaccess (redirect to separate mobile site/domain).
    Can you tell me how to do this? Say the images are image1.jpg and image1_m.jpg (the mobile version)


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •