使用 JavaScript/onorientationchange 重置 iPhone 上 Safari 的比例/宽度/缩放
我根据用户使用 body 标签中的 onorientationchange 调用握持手机的方式显示不同的内容。这非常有效 - 我隐藏一个 div，同时使另一个 div 可见。
纵向模式下的 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.
The div in portrait mode looks great on first load. I use this to get the right scale/zoom:
<meta name="viewport" content="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?
Thanks in advance!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（7）
上面接受的“答案”并不是真正的答案，因为不允许任何缩放就像要求 IE 用户切换到另一个浏览器一样糟糕。这对于可访问性来说非常糟糕。你希望你的设计不要在切换视图方向时做苹果认为理想的时髦缩放操作，但你却让残疾用户望尘莫及。强烈不推荐。
尝试使用媒体查询或 js 挂钩（screen.width 等）在方向变化时自动调整您的设计。这就是为什么这些属性暴露给我们作为开发人员。
The "answer" accepted above is not really an answer, in that disallowing any zooming whatsoever is as bad as asking an IE user to switch to another browser. It's terrible for accessibility. You want to your design to not do funky zoom things that Apple has deemed ideal upon switching view orientation, but you are leaving disabled users in the dust. Highly not recommended.
Try using media queries or a js hook (screen.width, etc) to adjust your design automatically upon orientation change. It's why these attributes are exposed to us as developers.
这是我用来处理媒体查询缩放的方法：
最大规模是卖给我的东西。这意味着 iPhone 上从纵向到横向的过渡非常流畅，根本没有变焦问题......
Here is what I use to deal with the zoom on my media-queries:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;">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...
当内容大于视口时，我在缩放级别从横向变为纵向时遇到一些问题。设置“minimum-scale=1.0”，为我解决了这个问题。
I had some problems with the zoom levels changing from landscape to portrait, when the content was larger than the viewport. Setting "minimum-scale=1.0", solved this for me.
如果您在 safari 中运行网络应用程序，这将不起作用，但我认为如果您在自己的应用程序中使用 UIWebView，它就会起作用。
我还没有对此进行测试，但是有一种简单的方法可以让您的 javascript 与代码的 Objective-C 端进行对话，此时您可以访问诸如 Web 视图缩放之类的内容。
This wont work if you are running a web-app in safari, but I think it will work if you are using a UIWebView inside your own app.
I havent tested this, but there is an easy way to get your javascript to talk to the objective-c side of the code at which point you would have access to things like the zoom of the web view.
我想我也有这个问题。
尝试在视口标签中添加“maximum-scale=1.0”（如果您愿意，也可以添加“minumum-scale=1.0”）。
这假设您不希望用户能够扩展（我不希望）
I had this issue too I think.
Try putting a "maximum-scale=1.0" (and maybe a "minumum-scale=1.0" if you feel like it) in your viewport tag.
This assumes you don't want the user to be able scale though (which I don't)
为此使用元标记是行不通的。我尝试了元标记和
orientationchange和gesturechange事件的所有可能组合，我尝试了超时和各种花哨的 JavaScript，然后我发现了这个：https://github.com/scottjehl/iOS-Orientationchange-Fix
通过此相关问题： 如何在 iPhone 上改变方向时重置 Web 应用程序的缩放/缩放？
在那篇文章中，Andrew Ashbacher 发布了一个由 Scott Jehl 编写的代码的链接：
这是一个解决方案很好地包装在 IIFE 中，所以你不需要必须担心名称空间问题。
只需将其放入您的脚本中（如果您使用的是 jQuery，则不要放入
document.ready()中）和 viola！它所做的只是在指示
orientationchange即将发生的devicemotion事件上禁用缩放。这是我见过的最好的解决方案，因为它确实有效并且不会禁用缩放。编辑：这种方法并不总是可靠，尤其是当您以一定角度握住 ipad 时。另外，我认为此活动不适用于第 1 代 ipad
Using meta tags for this does not work. I've tried every combination of meta tags and
orientationchangeandgesturechangeevents possible, I tried timeouts and all kinds of fancy javascript, then I found this:https://github.com/scottjehl/iOS-Orientationchange-Fix
via this related question: How do I reset the scale/zoom of a web app on an orientation change on the iPhone?
On that post, Andrew Ashbacher posted a link to the code written by Scott Jehl:
That is a solution wrapped nicely in an IIFE so you don't have to worry about name-space issues.
Just drop it in to your script (not into
document.ready()if you're using jQuery) and viola!All it does is disable zoom on
devicemotionevents that indicate thatorientationchangeis imminent. It's the best solution I've seen because it actually works and doesn't disable zoom.EDIT: this approach is not always reliable, especially when you are holding the ipad at an angle. also, i don't think this event is available to gen 1 ipads
您可以在内容属性中设置
用户可扩展属性。试试这个：来自 这个答案：
You can set the
user-scalableproperty in the content attribute. Try this:From this answer: