title: How can I make a specific, fixed-width DIV on my responsive website scale to fit smartphone screens?
body: <p>I have a responsive website.  I already have...</p>
  
  <p><code>&lt;meta name="viewport" content="width=device-width, initial-scale=1"/&gt;</code></p>
  
  <p>...in the header. The website doesn't just scale everything down automatically to fit on a smartphone screen.  It maintains the proper size of my DIVs (whether they be fixed or percentages) and I design my elements to fit accordingly.</p>
  
  <p>However, on one page, I have an interactive diagram with several elements.  These are blocks (with text inside them), and they have to maintain fixed widths.  The problem is, these fixed widths are much larger than smartphone screens.  It's about 1000px wide.</p>
  
  <p>I can't make this div percentage based.  It has to be at least 1000px wide and maintain that size on every device.  Obviously, this means that it will not fit on smartphone screens.</p>
  
  <p>What I would like to do is continuing using...</p>
  
  <p><code>&lt;meta name="viewport" content="width=device-width, initial-scale=1"/&gt;</code></p>
  
  <p>...for every other element in my website, except this one DIV.  I need to scale the entire parent DIV, its child DIVs and the text inside of the child DIVs.</p>
  
  <p>I have tried the CSS "zoom" property.  But, it doesn't scale the text properly, and the widths of the child DIVs don't seem to "zoom" equally.  They get out of alignment.</p>
  
  <p>How can I conditionally apply that meta viewport tag to everything except this specific, fixed width DIV?</p>