在我的网络应用中，我有一些缩略图，可在单击时打开一个灯箱。 在移动设备上，缩略图很小，用户通常会放大。问题是，单击播放时，灯箱在可见区域之外(他们必须滚动到灯箱才能观看视频)。 是否可以强制移动浏览器缩小以使他们可以看到整个页面？

现在还不能使页面更具响应性； 它是一个相当大的Web应用程序，需要大量时间进行重构。

也许这可以帮助您？stackoverflow.com/questions/17440196/

我之前看过该帖子，但我认为它不会对我有所帮助。 我指的是移动设备可以执行的捏缩放，而不是使用CSS缩放。 作为替代方案，是否可以检测浏览器的缩放级别？ AFAIK，诸如detect-zoom之类的工具已被较新版本的浏览器破坏。

仔细研究许多其他问题，尝试缩小内容以适合整个页面。这个问题与我的需求最相关，但没有答案。我找到了一个类似的问题，尽管有不同的实现方式，但有解决方案，而不是我所需要的。

我想出了这一点，它似乎至少在Android中可以使用。

initial-scale=0.1：真的缩小得很远。应该显示整个网站(然后再显示一些)

width=1200：覆盖初始比例，将设备宽度设置为1200。

您需要将1200更改为站点的宽度。如果您的网站具有响应能力，那么您可以仅使用initial-scale=1。但是，如果您的网站具有响应能力，则可能一开始就不需要。

function zoomOutMobile() {

var viewport = document.querySelector('meta[name="viewport"]');

if ( viewport ) {

viewport.content ="initial-scale=0.1";

viewport.content ="width=1200";

}

}

zoomOutMobile();

对于我来说，这很好地调整了Android和Windows Phone上的视口的大小。 谢谢！

不错的脚本！ 非常感谢，可以在所有设备(Android，iPhone，iPad，Windows Phone)上使用！！ (不要忘记将其放在html的末尾)

我猜我遇到了类似的问题，相反，但解决方案肯定是相同的。就我而言，我有一个缩略图，人们可以单击该缩略图，然后打开一个"弹出"窗口，用户可能会放大该窗口以查看更好的图像，完成后，我想以1.0的比例返回到正常页面。

为此，我四处张望，直到我了解发生了什么，然后可以编写正确的代码。

元数据中的视口定义是实时值。更改后，系统将考虑新值并相应地修复渲染。但是，GUI会检测到"更改时"，并且在运行JavaScript代码时，GUI线程通常被阻止...

考虑到这一点，这意味着这样做会失败：

viewport = jQuery("meta[name='viewport']");

original = viewport.attr("content");

force_scale = original +", maximum-scale=1";

viewport.attr("content", force_scale); // IGNORED!

viewport.attr("content", original);

因此，由于我发现固定比例尺的唯一方法是通过进行不想保留的更改来强制调整比例尺，因此必须将其重置为原始尺寸。但是中间的更改不会被查看并采取行动(极大的优化！)，那么我们如何解决该问题呢？我使用了setTimeout()函数：

viewport = jQuery("meta[name='viewport']");

original = viewport.attr("content");

force_scale = original +", maximum-scale=1";

viewport.attr("content", force_scale);

setTimeout(function()

{

viewport.attr("content", original);

}, 100);

在这里，我会睡100毫秒，然后将视口重设为我认为正常的水平。这样，视口将考虑maximum-scale=1参数，然后超时并删除该参数。在此过程中，缩放比例又变回了1，还原我的原始文档(没有maximum-scale参数)可以按预期工作(即，我可以再次缩放界面)。

警告1：如果原始文件中有一个maximum-scale参数，则可能要替换它，而不是像在我的示例代码中那样在末尾附加另一个值。 (即force_scale = original.replace(/maximum-scale=[^,]+/,"maximum-scale=1")会进行替换-但仅在已有maximum-scale时才起作用，因此您可能需要首先检查以允许出现任何一种情况。)

警告2：我尝试使用0ms而不是100ms，但是它失败了。每种浏览器的浏览器可能有所不同，但是Mozilla系列会立即运行立即超时的计时器代码，这意味着GUI进程将永远不会有机会在执行重置视口的功能之前将比例重置为1。我也确实知道一种方法来知道当前的视口值是由GUI处理的...(不幸的是，这是一个hack)。

类似于Radley Sustaire的解决方案，无论何时使用React和

zoomOutMobile = () => {

const viewport = document.querySelector('meta[name="viewport"]');

if ( viewport ) {

viewport.content = 'initial-scale=1';

viewport.content = 'width=device-width';

}

}

在我的渲染器中

this.zoomOutMobile();

我发现的一种边缘情况是这在Firefox移动浏览器上不起作用

var zoomreset = function() {

var viewport = document.querySelector("meta[name='viewport']");

viewport.content ="width=650, maximum-scale=0.635";

setTimeout(function() {

viewport.content ="width=650, maximum-scale=1";

}, 350);

}

setTimeout(zoomreset, 150);

用页面宽度替换650

这个对我有用

let sw = window.innerWidth;

let bw = $('body').width();

let ratio = sw / bw - 0.01;

$('html').css('zoom', ratio);

$('html').css('overflow-x', 'hidden');

它适合HTML到屏幕并防止滚动。但这不是一个好主意，并且并非在所有地方都能奏效。