混合浏览器视口宽度答案

【问题标题】：Mixing browser viewport widths混合浏览器视口宽度
【发布时间】：2013-07-15 08:50:01
【问题描述】：

我正在开展一个项目，我们希望为客户部署响应式移动版本的网站 - 在这种情况下，现有的“桌面”网站有两个断点：

>= 980px
>= 1200px

在屏幕小于 980 像素的设备上，“小型桌面”网站只是缩放以适应浏览器，因此用户可以点击缩放等并有效地浏览整个桌面网站。

我们现在想要为小屏幕（

之前我使用的是元标记：

<meta name="viewport" content="width=980">

但据我了解，要让小屏幕设备正确缩放布局，我需要调整它以阅读：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

我真正需要的当然是两者的混合！ - 有什么想法吗？

【问题讨论】：

不幸的是，当您尝试为不同的视口大小采用固定和响应式站点时，我看不到解决方法。如果您有 2 个大断点，而现在有一个较小的断点针对移动设备，那么您最好的选择可能是为 481+ 至 980 设置一个断点。
我不认为它会解决任何问题，但出于兴趣，如果您从元标记中删除 initial-scale=1.0"，它会如何表现？

【解决方案1】：

http://blakelondon.co.uk 遇到了类似的挑战 - 在比移动设备更大的设备上进行原生缩放，而不是在移动设备上响应。

您的问题与我的相反，但我认为同样的方法也可以。

该解决方案使用 JavaScript 将元视口重写为固定宽度以强制原生设备缩放。警告 - 它带有在其中一种情况下布局重排的一个非常小的缺点。

首先将元视口设置为正常：

<meta name=“viewport” content=“width=device-width” />

然后，添加一些 JavaScript 将该值重写为固定宽度，以强制在较小的设备上进行原生缩放（选择 screen.width 以适应）：

if (screen.width <= 640) {
  viewport = document.querySelector(“meta[name=viewport]”);
  viewport.setAttribute(‘content’, ‘width=980’);
}

希望有帮助！

附：我的同事@cole007 也提出了这个问题，代码略有不同： http://cole007.net/blog/136/responsiveish-viewport-hack

【讨论】：