title: Force desktop browsers to display mobile version of website
body: <p>I have been asked to find if there is a quick way to force our mobile web application to be displayed on desktop web browsers. This is a stopgap-measure until we have the time and resources to finish work on responsively rendering correctly on larger-than-mobile devices.</p>
  
  <p>The first thing I thought of for desktop-ifying our mobile webapp was to pull the mobile site into an iFrame and force a width and height (414x736 for now). I was hoping that by doing so, the CSS media selections would honor a 414px width, but that is not happening.</p>
  
  <p>If I dump the width of the viewport to the console, it is in fact showing a width of 414px, but as you will see from the screenshots attached it's clear that the CSS media selections are not honoring a 414px width.</p>
  
  <p>Here is what we want to see (this is just a screenshot of Chrome's debugger in iPhone 6 device mode):</p>
  
  <p><a href="https://i.stack.imgur.com/uVx2I.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uVx2I.jpg" alt="What We Want"></a></p>
  
  <p>Here is that same view rendered into an iFrame whose width and height have been set to 414 and 736 respectively. The frame size is perfect and functions just as I want, but the CSS media selections are borked:</p>
  
  <p><a href="https://i.stack.imgur.com/hIVkD.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hIVkD.jpg" alt="What I Have"></a></p>