title: How to use min-width on mobile?
body: <p>I can't for the life of me find out why <code>min-width</code> isn't working on mobile on my website. There is probably a really basic solution to this but I can't find anything.</p>
  
  <p>Basically, I have an element with this CSS:</p>
  
  <pre><code>fullscreen {
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      position: absolute;
      min-width: 100%;
      min-height: 100%;
  }
  </code></pre>
  
  <p>This works perfectly on desktop browsers, at all resolutions and aspect ratios, but it completely breaks down on mobile, although when I change <code>min-width</code> to <code>width</code>, it fills the screen perfectly on desktop and mobile.</p>
  
  <p>And when I use <code>height</code> instead of <code>min-height</code>, it works as expected and I can position elements with <code>bottom</code> on mobile, but when using <code>min-height</code>, it uses some arbitrary position about midway up the screen. <code>max-width</code> and <code>max-height</code> seem to work correctly as well</p>
  
  <p>What's even weirder to me is that using the mobile device "emulator" on Chrome, the results seem to be totally random, sometimes working, sometimes having that midway line at the same place as my actual phone, sometimes having it in a completely different place.</p>
  
  <p>My phone consistently has the midway line at the same place.</p>
  
  <p>I've seen a lot of people recommend the use of the meta viewport tag, and I'm pretty positive I have it implemented correctly:</p>
  
  <pre><code>&lt;meta name = "viewport" content = "width = device-width, initial-scale = 1.0"&gt;
  </code></pre>
  
  <p>The ideal solution for me would be to simply replicate the same behaviour as I have on desktop on mobile, since my desktop site already works for all resolutions.</p>
  
  <p>Thanks alot for your help, I've spent at least 3 hours trying to figure this one out!</p>
  
  <p>EDIT: I've tried implementing the behaviour I want in JavaScript, and for some reason, it still doesn't want to work on mobile. Here is a test I made:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Mobile fit test&lt;/title&gt;
          &lt;meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0"&gt;
  
          &lt;style&gt;
              body {
                  margin: 0;
                  padding: 0;
                  overflow-x: hidden;
                  overflow-y: hidden;
              }
          &lt;/style&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;img id = "fit" src = 'http://placehold.it/1000'&gt;
  
          &lt;script&gt;
              var image = document.getElementById("fit");
              var image_width, image_height;
  
              window.onresize = function() {
                  console.log(image_width, image_height);
  
                  var width  = 1.0 / window.innerWidth * window.innerHeight / image_height * image_width;
                  var height = 1.0;
  
                  if (width &lt; 1.0) {
                      width  = 1.0;
                      height = 1.0 / window.innerHeight * window.innerWidth / image_width * image_height;
                  }
  
                  width  *= window.innerWidth;
                  height *= window.innerHeight;
  
                  image.style.width  = width  + "px";
                  image.style.height = height + "px";
  
                  image.style.position = "absolute";
  
                  image.style.left = window.innerWidth  / 2 - width  / 2 + "px";
                  image.style.top  = window.innerHeight / 2 - height / 2 + "px";
              }
  
              document.body.onload = function() {
                  image_width  = image.width;
                  image_height = image.height;
  
                  window.onresize();
              }
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>With this, I can still zoom, <code>window.innerWidth</code> and <code>window.innerHeight</code> do not appear to be what they're supposed to be, and it still works perfectly with any resolution and the plugin that Mileta Dulovic suggested. This is driving me nuts!</p>