缩放时在iOS上更改页面大小

时间:2013-08-16 20:52:28

标签: javascript html ios resize

我在使用iOS时遇到了一些问题(Safari和Chrome for iOS)。当用户缩放页面时,似乎正在改变大小(它也会触发调整大小的javascript事件数十次),这会弄乱我使用javascript定位的一些内容。我无法通过绑定resize事件来解决这个问题,因为它被调用了太多次,我无法知道哪一个是最后一个。

我尝试在视口上设置多个选项但没有运气(宽度,初始比例,最大比例,最小比例)。

我有一个固定位置div,固定顶部,右侧,左侧和顶部。内部有几个绝对div,它们的大小和位置设置为%。

看起来页面实际上是在改变大小,因为当我放大后缩小时,我会看到屏幕右下角的空白边框。我想防止这种情况发生。

2 个答案:

答案 0 :(得分:2)

我发现了这个问题。页面没有自行调整大小,固定定位的元素是。事实证明,固定定位跟随用户的视图,如果他放大。我找到的唯一解决方案是将我的所有固定位置改为绝对定位(在我的情况下将会很痛苦)。

我还发现,由于resize事件绑定到窗口,因此在缩放时视图会发生变化,因此会触发resize函数。关于其他元素的调整大小事件does not work(在我的情况下,我实际需要的是看到身体上的调整大小)。

答案 1 :(得分:0)

我不知道这种性质的问题,即使在早期版本的iOS Safari / Chrome上也是如此。您使用的iOS版本是什么?如果您有权访问OSX,您是否已在iOS模拟器上提供的所有iOS版本上测试过Safari?你在iPad上有同样的行为吗?您是否在小视口上测试过其他浏览器?你提到一些关于resize事件被调用太多次的事情。

我会尝试使用简单的样式获取一个简单的HTML页面,并且没有javascript可以使用以下代码:

<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">

上面的代码应该使缩放变得不可能......如果 在一个简单的设置上不起作用,那么肯定是你在测试的iOS版本上我不熟悉的一个错误上。

另一方面,如果这样可行,则会在代码上覆盖视口标记。