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

【问题标题】：Is there a way to set the minimum viewport size for phones without causing the site to zoom in on tablets?有没有办法设置手机的最小视口大小而不会导致网站在平板电脑上放大？
【发布时间】：2017-04-20 09:44:27
【问题描述】：

我一直致力于制作一些强制 1000 像素布局以提高响应速度的网站。一方面，它可以很好地缩小到约 500 像素，另一方面，它可以很好地扩展到 780 像素。我的手机是 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 像素时缩放和渲染？

【问题讨论】：

添加视口元标记是不够的。您还需要使用 CSS 来调整某些元素的显示以适应较小的分辨率。例如，为桌面分辨率上宽度较小的浮动元素定义 100% 宽度。
@JohannKratzik 我已经这样做了。问题是我无法缩放到 780px 以下（不是因为我不知道如何使用媒体查询，而是因为布局不起作用）。这是别人的设计，我的目标是在不实际改变他们设计基础的情况下让它尽可能小。
Achieving min-width with viewport meta tag的可能重复

标签： html css responsive-design

【解决方案1】：

如果您的内容应至少为 780 像素宽，请在您的 body 上设置 min-width。

body {
  min-width: 780px;
}

如果您希望它开始缩小（好像视口是 780 像素宽），请使用缩小以适应：

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

【讨论】：

shrink-to-fit=yes 正是我正在寻找的！谢谢阿德鲁！

【解决方案2】：

我想我已经找到了一个解决方案：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 来为 viewport 元标记添加一个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

【讨论】：