Just starting out with responsive web design, I'm working on switching between a large image and a small one based on screen width.
It's all good when I resize my desktop browser, but when I check it on my mobile phone, the large image is still showing up.
This is the code I have:
HTML:
<div id="wrapper">
<img src="lrgimg" id="lrgimg" alt="" />
<img src="smlimg" id="smlimg" alt="" />
<p>Some text with changing font size based on device width.</p>
</div>
CSS:
#wrapper{
margin-right:0 auto;
margin-left:0 auto;
padding:10px;
width:80%;
border:1px solid red;
}
#smlimg{
display:none;
max-width:100%;
max-height:100%;
}
#lrimg{
max-width:100%;
max-height:100%;
}
/* media queries */
@media screen and (max-width: 480px){
#lrgimg{display:none;}
#smlimg{display:inline;}
p{
font-size:30px;
}
}
I thought using max-width would cover most phone screen widths, but apparently resolutions make a big difference even if the width stays the same.
So, my question is: Is there a standard @media query that will work for most modern mobile phone browsers?
Check out the demo