Question

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

>= 980px
>= 1200px

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

我们现在想要为小屏幕（＆lt; 480px）实现该站点的版本，但是我遇到的问题是通过更改元视口标记以适应小屏幕上1：1布局的断点我使用桌面网站的缩放版本，屏幕在481px和979px之间的用户失去了使用该功能的能力。

以前我使用的是meta标签：

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

但据我所知，让小屏幕设备正确缩放布局我需要将其调整为：

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

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

Answer 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’);
}

希望有所帮助！

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