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

2023年9月23日 198次阅读

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

>如果我没有设置视口,两个设备都会将页面渲染为~1000px宽,因此我的所有优秀缩放代码都会被完全忽略,并且手机上的页面非常庞大.
>如果我设置< meta name =“viewport”content =“width = device-width”>,页面呈现完美,但它开始在手机上极度放大(缩放显示320px的布局).
>如果我设置< meta name =“viewport”content =“width = 780”>,它会在手机上完美呈现和缩放,但放大平板电脑(将布局缩放到780px宽,即使我有1000px到与…合作).

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

最佳答案 如果您的内容应至少为780像素宽,请在您的身体上设置最小宽度.

body {
  min-width: 780px;
}

如果您希望它开始缩小(就像视口宽度为780px一样),请使用缩小到适合：

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