Question

我一直致力于制作一些强制1000px布局的网站，以提高响应速度。在一个，它可以很好地缩小到~500px，在另一个上它很好地缩放到780px。我的手机是320像素，我的平板电脑大约是1000倍。问题是：

如果我没有设置视口，两个设备都会将页面渲染为~1000px宽，因此我的所有优秀缩放代码都会被完全忽略，并且手机上的页面非常庞大。
如果我设置<meta name="viewport" content="width=device-width">，页面呈现完美，但它会在手机上开始极度放大（缩放显示320px的布局）。
如果我设置<meta name="viewport" content="width=780">，它会在手机上完美渲染和缩放，但放大平板电脑（即使我有1000px可以使用，也可以将布局缩放到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。我甚至尝试使用CSS转换来扩展Firefox上的整个页面，但这会在缩放页面周围留下一堆空白（这是一个非常糟糕的解决方案）。

有没有办法让设备渲染并缩放到500px的宽度，然后当它们的屏幕尺寸低于它时缩放和渲染为500px？

Answer 1

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

body {
  min-width: 780px;
}

如果您希望它开始缩小（就像视口宽度为780px一样），请使用“缩小到适合”：

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

Answer 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

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

2 个答案: