Is there a way to set the minimum viewport size for phones without forcing the site to zoom in on tablets?

Question

I am working on creating several websites that make 1000px layouts be more responsive. Firstly, it scales perfectly to ~ 500 pixels, and on the other it scales perfectly to 780 pixels. My phone is 320 pixels and the tablet is about 1,000 times. The problem is that:

• If I do not set the viewport, both devices display a page width of ~ 1000 pixels, so all my beautiful zoom code is completely ignored, and the page is massive on the phone.
• If I installed <meta name="viewport" content="width=device-width">, the page will look perfect, but it will start to increase very much on the phone (enlarged to 320 pixels in the layout).
• If I install <meta name="viewport" content="width=780">, it displays and scales perfectly on the phone, but it scales on the tablet (scaled the layout to 780 pixels wide, although I have 1000 pixels to work with).

I also tried a workaround for JavaScript:

<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0" />
<script>
if (screen.width < 780) {
  var viewport = document.getElementById("viewport");
  viewport.setAttribute("content", "width=780");
}
</script>

This works in Chrome, but not in Firefox. I even tried using CSS transforms to scale the entire page in Firefox, but that leaves a blank portion of spaces around the scaled page (and this is a terrible solution).

Is there a way to render and scale devices to their widths of up to 500 pixels and then scale and display by 500 pixels when their screen size is below this?

Answer 1

780 , .

body {
  min-width: 780px;
}

, ( 780 ), :

<meta name="viewport" content="width=device-width, shrink-to-fit=yes">

Answer 2

, : Firefox viewport, , :

<script>
  var MIN_WIDTH = 780;
  var viewport = document.createElement("meta");
  viewport.setAttribute("name", "viewport");
  if (screen.width < MIN_WIDTH) {
    viewport.setAttribute("content", "width=" + MIN_WIDTH);
  } else {
    viewport.setAttribute("content", "width=device-width, initial-scale=1.0");
  }
  document.head.appendChild(viewport);
</script>

---

polyfill, min-width viewport, :

<meta name="viewport" content="width=device-width, initial-scale=1.0, min-width=780"/>
<script type="text/javascript" src="viewport-min-width.js"></script>

https://github.com/brendanlong/viewport-min-width-polyfill