重置缩放级别加载 [英] Reset zoom level onload

问题描述

我没有iPhone，因此无法自己进行测试，但是根据客户的说法，如果他进行放大以更轻松地单击链接，那么当下一页加载时，页面将保持放大状态，并且用户手动进行了操作再次缩小.

I don't have an iPhone so am unable to test this myself, but according to a client if he zooms in to more easily click a link, then when the next page loads the page stays zoomed in and the user manually has to zoom out again.

请注意，这不是响应网站(未设置meta width = device-width).

Note that this is NOT a responsive site (it doesn't have a meta width=device-width set).

有什么办法可以防止这种情况发生?我尝试添加maximum-zoom = 1 onload只是为了在几秒钟后将其删除，但这根本不起作用.

Is there any way to prevent this? I tried adding a maximum-zoom=1 onload only to remove it seconds later, but that didn't work at all.

谷歌搜索问题时，我只能发现拥有缩放级别的人在更改Web应用程序的方向时变得香蕉味–这不是同一个问题.

When googling the problem all I can find is people having the zoom level go bananas when changing orientation of a webapp - which is not the same problem.

推荐答案

出于安全方面的考虑，未经用户同意和手动输入，无法更改浏览器的缩放级别.使用活动的插件(Flash?)也许可以达到类似的效果，但这是真正重置浏览器缩放级别的唯一方法.

Due to security concerns, it is not possible to change the browser's zoom level without the user's consent and manual input. It is possible that you might be able to achieve a similar effect using an active plugin (Flash?), but that is the only way to truly reset the browser's zoom level.

您也可以使用transform: zoom()属性(良好的SO参考)，并使网站看起来好像缩放已重置，但仅在一定程度上显示.在生产之前，您可能还需要调整非整数缩放级别和跨浏览器的兼容性.即使这样，此CSS实现也可能不是您想要的，因为它通常仅调整元素样式和字体大小.您还可以使用以下缩写jQuery代码来达到相同的效果:$(document.body).css('zoom','150%').

You could, as an alternative, change the browser's CSS zoom with the transform: zoom() attribute (a good SO reference), and make the site appear as if the zoom has reset, but only to an extent. Before production, you may also want to adjust for non-integer zoom levels and cross-browser compatibility. Even so, this CSS implementation probably isn't what you're looking for, since it often only adjusts element styles and font size. You might also use this abbreviated jQuery code to achieve the same effect: $(document.body).css('zoom','150%').

这篇关于重置缩放级别加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！