使用JavaScript / onorientationchange在iPhone上重置Safari的缩放/宽度/缩放 [英] Reset scale/width/zoom of Safari on iPhone using JavaScript/onorientationchange

问题描述

我正在显示不同的内容，具体取决于用户如何使用body标签中的onorientationchange调用来保持他/她的手机。这很有效 - 我隐藏了一个div，同时让另一个可见。

I am displaying different content depending on how the user is holding his/her phone using the onorientationchange call in the body tag. This works great - I hide one div while making the other visible.

纵向模式下的div在首次加载时看起来很棒。我使用它来获得正确的比例/缩放：

The div in portrait mode looks great on first load. I use this to get the right scale/zoom:

< meta name =viewportcontent =width = device-width; initial -scale = 1.0; maximum-scale = 1.0; />

即使纵向模式中的内容运行，宽度也是正确的，用户可以向下滚动。横向模式下的显示也很完美。但是，如果横向模式下的内容要求用户向下滚动，那么当用户返回纵向模式时，屏幕会缩小，可以这么说。无论用户是否在横向模式下向下滚动，都会发生这种情况。

Even if the content in portrait mode run over, the width is correct and the user can scroll down. The display in landscape mode is perfect too. However, if content in landscape mode requires the user the scroll down, then when the user returns to portrait mode, the screen is "zoomed out" so to speak. This happens whether or not the user scrolled down while in landscape mode.

我尝试了许多不同的方法来尝试获得正确的屏幕比例/缩放/宽度，但没有运气。有没有办法做到这一点？

I've tried many different things to try to get the scale/zoom/width of the screen right, but no luck. Is there any way to do this?

提前致谢！

推荐答案

以下是我用来处理媒体查询缩放的内容：

Here is what I use to deal with the zoom on my media-queries:

< meta name =viewportcontent = width = device-width，initial-scale = 1.0，maximum-scale = 1.0，user-scalable = no;>

最大规模是为我出售的东西。这意味着iPhone上从纵向到横向的过渡非常流畅，完全没有变焦问题...

The maximum-scale is the thing that sold it for me. It means the transition from portrait to landscape on an iphone is really smooth with no zoom problems at all...

这篇关于使用JavaScript / onorientationchange在iPhone上重置Safari的缩放/宽度/缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！