在我的网页应用中,我有一些缩略图,当用户点击它们时会打开一个灯箱。在手机上,缩略图很小,用户通常会放大缩略图。问题是,当他们点击播放时,灯箱位于可视区域之外(他们必须滚动到灯箱才能看到视频)。是否有可能强制移动浏览器缩小页面,以便他们可以看到整个页面?
目前,让页面更具响应性不是一个选项;它是一个相当大的网络应用程序,重构需要花费大量的时间。
在我的网页应用中,我有一些缩略图,当用户点击它们时会打开一个灯箱。在手机上,缩略图很小,用户通常会放大缩略图。问题是,当他们点击播放时,灯箱位于可视区域之外(他们必须滚动到灯箱才能看到视频)。是否有可能强制移动浏览器缩小页面,以便他们可以看到整个页面?
目前,让页面更具响应性不是一个选项;它是一个相当大的网络应用程序,重构需要花费大量的时间。
我搜了很多其他问题,试图找到一些东西来缩小页面以适合整个页面。这个问题是我需要的最相关的,但没有答案。我发现这个类似的问题有一个解决方案,尽管实现方式不同,但并不是我需要的。
我想出了这个,在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();
`viewport.content = 'initial-scale=1, width=1200';`
否则只会应用'width=1200'。这也适用于下面@Davey的解决方案。 - Esger zoomOutMobile = () => {
const viewport = document.querySelector('meta[name="viewport"]');
if ( viewport ) {
viewport.content = 'initial-scale=1';
viewport.content = 'width=device-width';
}
}
在我的渲染器内部
this.zoomOutMobile();
viewport.content = ...
语句的顺序,才能在第一次调用时使其正常工作。随后的调用无论顺序如何都可以正常工作。 - simlmx `viewport.content = 'initial-scale=1, width=device-width';`
否则只有"width=device-width"会被应用。 - Esgerviewport = 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:我尝试将休眠时间从100毫秒更改为0毫秒,但失败了。这可能因浏览器而异,但 Mozilla 家族的立即超时计时器代码会连续运行,这意味着 GUI 进程在执行重置视口函数之前将无法重新设置缩放比例为1。同时,我确实知道如何知道当前视口值是否由 GUI 处理...(即这是一种不幸的Hack方法。)
这个对我有用
let sw = window.innerWidth;
let bw = $('body').width();
let ratio = sw / bw - 0.01;
$('html').css('zoom', ratio);
$('html').css('overflow-x', 'hidden');
它适合将HTML放入屏幕中,并防止滚动。但这并不是一个好主意,并且不适用于所有情况。
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替换为您页面的宽度