问题标签 [viewport]

我正在尝试确定当前浏览器窗口的实际 viewPORT 大小。我试过了：

• window.innerHeight/innerWidth
• document.documentElement.clientHeight/clientWidth
• document.body.clientHeight/clientWidth

全部返回整个页面大小，而不是查看区域。

我最终要实现的是强制弹出菜单出现在屏幕上（在视口中）。现在，当它显示时，它可能会显示在滚动条下方，而用户对此并不满意。我知道他们点击的位置的 x,y。我只需要将它与查看区域的大小（与弹出窗口的大小）进行比较，看看它是否会离开屏幕。

应该注意的是，页面显示在 IFRAME 中，所以如果我需要上一级以获得正确的值，我可以这样做。

[请注意，我只能在 Android 移动网络浏览器（通过模拟器使用）上重现该问题。]

概括

单击一个锚点转到页面底部，然后单击另一个锚点到页面顶部 - 并在顶部的文本框中输入内容，您将向下滚动到页面底部的锚点。

初步调查

似乎这种行为在某种程度上是具有视口元标记的结果。我推测，当用户开始键入时，Android 上的浏览​​器会混淆锚链接以及用户在视图中拖动的位置。我意识到这是一个有点复杂的场景，但有人有解决这个问题的提示/建议吗？

重现步骤：

A. 使用以下标记创建一个新网页 test.html：

B. 在您的 Android 移动浏览器上，访问 test.html

C. 点击链接“底部”

D. 点击链接“置顶”

E. 点击文本框

实际结果：

浏览器向下滚动到页面底部。用户现在看不到他们输入的内容。

预期成绩：

浏览器在 E 之后不会滚动任何地方。用户可以输入文本而不会分心。

笔记：

如果用户拖动屏幕到顶部，那么他们可以在文本框中输入而无需向下滚动。该问题似乎与锚链接、文本框和视口标签无关。如果删除了这些变量中的任何一个，则该错误不存在。

I am drawing several shapes (such as circles) that are keyed off of the window height & width. Since the window always starts at a given size, they are drawn correctly, but when the window is resized, it messes the aspect ratio up.

How can I draw the shapes properly, regardless of window size?

有没有办法让滚动条内的组件内容达到 100% 的高度。

这是一个简单的例子：

如果你运行这段代码并向下滚动一点，你会得到：

如您所见，绿色条（设置为 100% 高度）只是使用视口的高度，而不是其父组的高度，红色条将其拉伸为 500px 高。

有没有办法解决这个问题？

好的，所以，我在弹出窗口中打开了以下标记（通过 Javascript 将大小调整为 120px 宽度和 300px 高度）：

我知道那里的图像并不完全是您所说的“表格数据”，而且到处都有 CSS。事情的真相是；这个标记不是盒子模型最好的朋友，我无法改变它，我只是应该找到我要描述的错误。

仅在 Firefox（各种版本和平台）上——并且由于某种原因并非总是如此（我还找不到模式）——图像没有完整显示。窗口正在调整到正确的大小，但似乎 100% 的主体/表格只缩小到 190 像素并停在那里，从那时起只有视口缩小，但主体保持在 190 像素。由于图像居中，这会导致左侧显示 35 像素的边框 - 并且图像与视口重叠（因此不会完整显示）。

奇怪的是，我昨天使用完全相同的浏览器/操作系统访问了完全相同的页面而没有进行任何更改，并且可以重现错误（也在重新加载、重新启动等之后）并且不能再出现了，因为正文不会缩小到 120px美好的。我在这里找不到模式。

非常感谢任何建议或想法！

非常感谢您提前提供的帮助
托比

我正在尝试加载一个 div 并将其绝对定位在移动 safari 中 - 想想类似于警报框的东西。

我尝试使用绝对定位的 div，顶部设置为 50%，边距为高度/宽度的一半：

但正如我意识到的那样，视口将不同于页面上的固定位置，并且当浏览器向下滚动时，元素会显示在偏移位置。我想我可以尝试根据window.pageYOffset值使用javascript移动位置，但不幸的是，无论是否显示chrome，这都显示为0。

我最后的想法是使用计算浏览器 chrome 高度window.outerHeight-window.innerHeight，然后根据该值移动 div，但不幸的是，这不起作用。

我试过（w/jquery）：

但我发现window.innerHeight两者window.outerHeight都是相同的——306（我已经打开了 safari developer chrome）——所以这似乎不起作用。

谁能指出我正确的方向？

谢谢！

-西蒙

I have an AJAX app built for mobile Safari browser that needs to display different types of content.

For some content, I need user-scalable=1 and for other ones, I need user-scalable=0.

Is there a way to modify the value of the content attribute without refreshing the page?

我创建了一个示例脚本来添加和删除头部的元标记。但 Android 2.2 似乎并不尊重它的删除。但是，它确实尊重例如在点击时添加元标记。我如何让它尊重标记的删除并通过 javascript 恢复到默认视口？

我很难理解这些是如何工作的。首先，在 2d 游戏中，投影矩阵应该设置为左、右、上、下与窗口匹配的正交投影矩阵，对吗？但是当窗口调整大小时，我应该只更改 glViewport，而不是投影矩阵吗？以及如何保持纵横比？

有人可以在二维拼字游戏中解释这两件事的目的，以便我更好地理解它吗？

感觉 OpenGL 在 2d 设置中做了很多无用的事情。当图像已经存在时光栅化和计算片段，将顶点坐标转换为 NDC 仅通过 glViewport 转换回它们已经存在的位置。

此外，为什么在传统的免费 OpenGL 中我们必须制作自己的矩阵，而不是 glViewport 所做的我们自己的计算？

谢谢。

我正在为 iPhone 编写网页/应用程序。我需要在页面重新加载后滚动到特定位置，无论我在之前使用页面时滚动到哪里。我使用的脚本在 Firefox 中运行良好，但在 mobileSafari 中运行良好。与 Firefox 相比，mobileSafari 似乎保存了我之前滚动到的位置，并在重新加载后跳转到那里，忽略了我在重新加载时触发的 scrollTo。

这是我使用的代码：

它适用于我手动触发的点击事件。如果我单击一个按钮来触发滚动功能，那么滚动就完成了。我试图通过合成事件 javascript 触发点击，但这也不起作用。

有什么方法可以在重新加载和/或其他非明确的用户触发事件时存档滚动？