title: Attempting to hide and show images depending on device width
body: <p>I am new to responsive web design and am attempting to hide a current large image and show a new small one when the screen width is less than 480px wide. </p>
  
  <p>This seems to work well when I shrink the width of my desktop browser, but when I navigate to the page on my mobile phone it is still displaying the large image still. </p>
  
  <p>The code I'm trying:</p>
  
  <p>html:</p>
  
  <pre><code>&lt;div id="wrapper"&gt;
      &lt;img src="lrgimg" id="lrgimg" alt="" /&gt;
      &lt;img src="smlimg" id="smlimg" alt="" /&gt;
      &lt;p&gt;Some text , font size will change depending on device width.&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#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;
      }
  
  }
  </code></pre>
  
  <p>I assumed <code>max-width</code> was enough to satisfy most phone screen widths but apparently even though the screen widths have stayed the same the resolutions have increased hugely.</p>
  
  <p>My question is: Is there a standard <code>@media</code> query that I can use that will satisfy most modern mobile phone browsers? </p>
  
  <p>here is a <a href="http://www.chrismepham.com/sites/test/livesearch.html" rel="nofollow">demo</a></p>