usagizmo
8/31/2018 - 11:58 AM

Fit viewport on android

index.html
content_copyfile_download
<head>
  <meta id="viewport" name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<script>
;(function () {
  'use strict'

  function applyViewport () {
    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
      var ww = window.screen.width
      var mw = 700 // min width of site
      var ratio = ww / mw // calculate ratio
      var viewportMetaTag = document.getElementById('viewport')
      if (ww < mw) { // smaller than minimum size
        viewportMetaTag.setAttribute('content', 'initial-scale=' + ratio + ', maximum-scale=' + ratio + ', minimum-scale=' + ratio + ', user-scalable=no, width=' + mw)
      } else { // regular size
        viewportMetaTag.setAttribute('content', 'initial-scale=1.0, maximum-scale=1, minimum-scale=1.0, user-scalable=yes, width=' + ww)
      }
    }
  }

  // ok, i need to update viewport scale if screen dimentions changed
  window.addEventListener('resize', function () {
    applyViewport()
  })

  applyViewport()
})()
</script>