Search code examples
javascripthtmlcssmobilemedia-queries

Correct using of mobile viewport on different devices with small width

I have such css code for mobile devices:

@media all and (min-width: 0px) and (max-width: 991px) {...}

and i have such html:

<meta name="viewport" content="width=1024, initial-scale=1" id="viewportMt">

<script>
  window.onload = function () {
    if(screen.width < 970) {
      var vp = document.getElementById('viewportMt');
      vp.setAttribute('content','width=640, initial-scale=1');
    }
  }
</script>

the main problem, is that when i firstly open my website: on most of devices i have to scale my browser view to fit it...

is it possible to fit device automatically? for example if device width is 340: i should scale it out a little bit (because website is to big for 340px (it;s min.640px))... If 900: then scale too...

even ipad (in portrait mode, because it's width is 768px).

is it possible to do?

plunker:

https://plnkr.co/edit/5KhIlmtLkWhtROs7y188?p=preview

and demo:

enter image description here

why i have there scrollbar? i need somehow to zoom it out, so that i will not have any scrollbar there... and my container should be 640px and no other values for mobile devices...

Solution

  • This is what I use for all my responsive web apps.

    <meta name="viewport" content="width=device-width, initial-scale=1">