html - 有没有办法在不导致网站在平板电脑上放大的情况下为手机设置最小视口(viewport)大小？

Question

我一直致力于制作一些强制 1000 像素布局具有更高响应性的网站。一方面，它可以很好地缩小到 ~500 像素，而另一方面，它可以很好地缩小到 780 像素。我的手机宽 320 像素，我的平板电脑宽 1000 倍左右。问题是:

• 如果我不设置视口(viewport)，两台设备都会呈现约 1000 像素宽的页面，因此我所有漂亮的缩放代码都将被完全忽略，并且该页面在手机上非常庞大。
• 如果我设置<meta name="viewport" content="width=device-width"> , 页面呈现完美，但它开始在手机上非常放大(缩放到显示 320 像素的布局)。
• 如果我设置<meta name="viewport" content="width=780"> ，它在手机上呈现和缩放完美，但在平板电脑上放大(将布局缩放到 780 像素宽，即使我有 1000 像素可以使用)。

我还尝试了 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。我什至尝试使用 CSS 转换来缩放 Firefox 上的整个页面，但这会在缩放后的页面周围留下一堆空白(这是一个糟糕的解决方案)。

有没有一种方法可以让设备渲染和缩放到宽度低至 500 像素，然后在屏幕尺寸低于 500 像素时缩放和渲染？

Answer 1

如果您的内容至少应有 780 像素宽，请在您的主体上设置最小宽度。

body {
  min-width: 780px;
}

如果你想让它开始缩小(好像视口(viewport)是 780 像素宽)，使用收缩以适合:

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