JSFiddle - React, Tailwind, and code Playground

HTML

<div>This div is 885x610 (ratio is in between 4:3 and 16:10) with a 1px border and 3px top margin, making a total of 887x615.</div>

CSS

body {
    margin: 0;
}
div {
    margin: 3px auto 0;
    width: 885px;
    height: 610px;
    border: 1px solid #f00;
    background-color: #fdd;
}

JavaScript

function getViewportWidth() {
     if (window.innerWidth) {
         return window.innerWidth;
     } else if (document.body && document.body.offsetWidth) {
         return document.body.offsetWidth;
     } else {
         return 0;
     }
 }

 function getViewportHeight() {
     if (window.innerHeight) {
         return window.innerHeight;
     } else if (document.body && document.body.offsetHeight) {
         return document.body.offsetHeight;
     } else {
         return 0;
     }
 }

 if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
     var actual_width = getViewportWidth();
     var actual_height = getViewportHeight();

     var min_width = 887;
     var min_height = 615;

     var ratio = Math.min(actual_width / min_width, actual_height / min_height);

     if (ratio < 1) {
         document.querySelector('meta[name="viewport"]').setAttribute('content', 'initial-scale=' + ratio + ', maximum-scale=' + ratio + ', minimum-scale=' + ratio + ', user-scalable=yes, width=' + actual_width);
     }
 }

 alert(document.querySelector('meta[name="viewport"]').getAttribute('content'));