使用 JavaScript/onorientationchange 重置 iPhone 上 Safari 的比例/宽度/缩放

2024-03-20

我根据用户使用 body 标签中的 onorientationchange 调用握持手机的方式显示不同的内容。这非常有效 - 我隐藏一个 div,同时使另一个 div 可见。

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

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />

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

我尝试了很多不同的方法来尝试使屏幕的比例/缩放/宽度正确,但没有成功。有什么办法可以做到这一点吗?

提前致谢!


上面接受的“答案”并不是真正的答案,因为禁止任何缩放就像要求 IE 用户切换到另一个浏览器一样糟糕。这对于可访问性来说非常糟糕。你希望你的设计不要做苹果认为在切换视图方向时理想的时髦缩放操作,但你却让残疾用户望尘莫及。强烈不推荐。

尝试使用媒体查询或 js 挂钩(screen.width 等)在方向变化时自动调整您的设计。这就是为什么这些属性暴露给我们作为开发人员。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 JavaScript/onorientationchange 重置 iPhone 上 Safari 的比例/宽度/缩放 的相关文章

随机推荐