问题标签 [viewport]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
7 回答
25927 浏览

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

我正在显示不同的内容,具体取决于用户使用 body 标签中的 onorientationchange 调用持有他/她的手机的方式。这很好用——我隐藏了一个 div,同时让另一个可见。

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

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

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

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

提前致谢!

0 投票
1 回答
528 浏览

flash - 有没有办法检测 Flash 是否在浏览器折叠上方?

我正在寻找一种方法来确定 Flash 电影是否在浏览器视口中可见。不幸的是,这里有一个很大的警告:必须在没有 JavaScript的情况下完成。在 Flash 或 Flex 中是否有可以检测电影何时可见的本机方法?我在想唯一的方法是某种低级别的渲染或绘图事件,但即使是当电影加载到折叠下方的页面上时也会触发。谢谢。

0 投票
3 回答
38987 浏览

css - 全视口高度缩放 ​​div 只是 css 没有 js ...可能吗?

好的,我正在尝试让一个 div 进行缩放,并且高度始终是视口的高度。我将链接到我的示例,因为它需要一些解释。

www.madmediablitz.com/tv/precentdemo.html

上面的链接是我最接近解决方案的链接,我希望这里的人会发现它很容易修复。我想要发生的是电视始终是视口的高度(在一定程度上,最小高度:~400px;最大高度:~700px;)。我在那里使用的代码基于http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/

www.madmediablitz.com/tv/precentdemo_alt.html

这是我不想发生的事情。如果您调整窗口大小,您会看到它不会按比例缩放。

我已经尝试了这两种方法大约 2 天了,但我无法让它工作。我真的在祈祷帮助,因为我认为这并不太复杂。

0 投票
2 回答
6619 浏览

height - 平均和/或最大视口高度是多少?

1024x768 分辨率屏幕上视口(可见区域)的平均和/或最大高度是多少?我想知道什么被认为是这个决议的“首当其冲”。

0 投票
6 回答
139998 浏览

javascript - 使用 jquery 获取元素相对于视口的位置

获取页面上元素相对于视口(而不是文档)的位置的正确方法是什么。jQuery.offset功能似乎很有希望:

获取第一个元素的当前坐标,或设置匹配元素集中每个元素相对于文档的坐标。

但这与文档有关。是否有一个等效的方法可以返回相对于视口的偏移量?

0 投票
2 回答
218 浏览

math - 需要有人来验证我的数学是否正确

在晚上的大部分时间里,我一直坐在铅笔上,试图回想如何实现可以导航 2D 区域的可扩展视口。自从我第一次听说以来已经有一段时间了,但我想我已经想通了,我只需要验证一下。

我们有一个带有“经典”笛卡尔坐标系的二维世界,x 轴指向右侧,y 轴指向顶部。

在世界区域中,我们有一个由 2 个点 Pmin 和 Pmax 定义的矩形视口,其中: Pmin(xmin, ymin), Pmax(xmax, ymax)。这些点定义了视口的大小、位置和比例

在世界区域中,我们有一个点 P,其中 Pmin < P(x, y) < Pmax。(P 在视口矩形中)

为了显示整个该死的东西,我们有一个画布(例如),它有一个“改变的”坐标系,x 轴指向右,y 轴指向下。画布的大小是MaxX 和 MaxY。画布的大小是固定的。

现在,为了在画布中显示点P'(x', y'),我需要计算它的位置,如下所示:

x' = (x - xmin) * Sx, 在哪里Sx = MaxX / (xmax - xmin)

y' = MaxY - (y - ymin) * Sy, 在哪里Sy = MaxY / (ymax - ymin)

*请注意,由于画布的坐标系,y'坐标是倒置的

换句话说:上面的数学应该注意显示一个点,同时考虑到比例和视口的位置。我对么 ?如果不是,请证明我错了。

0 投票
2 回答
4503 浏览

javascript - 视口上的 EXT JS toLayout 不显示任何内容

在阅读了许多关于在现有容器中添加新组件而不重新加载整个页面的示例之后,我在 Viewport 组件中组合树和选项卡时遇到了小问题。

我要做的是在单击事件上注册树节点并加载到内容容器新组件中,具体取决于节点类型,它可以是 tabpanel、gridpanel 或任何其他可用组件。

这是树对象的简短示例:

所有 DOM 操作都很顺利,所有内容都正确注册,显示新标题,但 dummy_tabs2 未显示。我确实尝试为 doLayout(true|false, true|false) 设置各种属性,但没有任何反应。

难道我做错了什么?

0 投票
5 回答
96379 浏览

javascript - 以跨浏览器的方式查找视口的确切高度和宽度(无 Prototype/jQuery)

我试图找到浏览器视口的确切高度和宽度,但我怀疑 Mozilla 或 IE 给了我错误的数字。这是我的身高方法:

我还没有开始宽度,但我猜它会是类似的东西。

有没有更正确的方法来获取这些信息?理想情况下,我希望该解决方案也可以与 Safari/Chrome/其他浏览器一起使用。

0 投票
1 回答
526 浏览

iphone - 独立于 iPhone 缩放的网站的一部分

是否可以在网站上拥有一个独立于 iPhone 缩放(即具有固定宽度和高度)的菜单栏(导航栏),而网站的其余部分可以放大和缩小?

使用元“视口”我可以设置整个网站的缩放,我想排除一些部分。

似乎无法通过使用 iFrame 或 CSS 转换来完成。

是否可以通过跟踪缩放元素的手势并使用 javascript 重新缩放我的菜单来完成?

0 投票
1 回答
1604 浏览

wpf - Wpf 视口坐标

嘿伙计们,我正在使用 wpf 3d,我目前正在编写一个程序,该程序将在屏幕上从左到右创建 3d 瓷砖,但我需要知道我在 X、Y 上的界限是什么,即 (-x-0) (0- x+) 所以我知道什么时候开始另一排瓷砖。我最初的想法是试图找出一种从像素到屏幕坐标的复杂算法,但似乎应该有一种更简单的方法。