有没有办法设置手机的最小视口大小而不会导致网站在平板电脑上放大？

Question

我一直致力于制作一些强制 1000px 布局响应更快的网站。一方面，它可以很好地缩放到 ~500px，另一方面，它可以很好地缩放到 780px。我的手机是 320 像素，我的平板电脑是 1000 倍左右。问题在于：

• 如果我不设置视口，两个设备都会渲染大约 1000 像素宽的页面，所以我所有漂亮的缩放代码都会被完全忽略，并且页面在手机上很大。
• 如果我设置<meta name="viewport" content="width=device-width">，页面呈现完美，但它开始在手机上极度放大（放大到显示布局的 320 像素）。
• 如果我设置了<meta name="viewport" content="width=780">，它会在手机上完美呈现和缩放，但会在平板电脑上放大（即使我有 1000 像素的宽度，也将布局缩放到 780 像素宽）。

我还尝试了一种 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>

这适用于 Chrome 但不适用于 Firefox。我什至尝试在 Firefox 上使用 CSS 转换来缩放整个页面，但这会在缩放后的页面周围留下一堆空白（这是一个糟糕的解决方案）。

有没有办法让设备渲染和缩放到宽度降低到 500 像素，然后在屏幕尺寸低于 500 像素时缩放和渲染？

Answer 1

我想我已经找到了一个解决方案：Firefox 忽略对视口元标记的更改，但会接受新的视口，因此我没有修复标记，而是根据我的要求插入一个：

<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向视口元标记添加一个属性，所以你可以这样做：

<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