问题标签 [viewport]

如何获得当前正在显示的长文档的哪一部分的指示？

例如，如果我的 html 包含 1,000 行
1
2
3
...
999
1000

并且用户在显示第 500 行的中间附近，那么我想得到“500\n501\n502”或类似的东西。

显然大多数情况会比这更复杂，但我的要求是找到当前正在浏览器视口中显示的文本，以便我可以显示适合当前文本的状态值。

谢谢马丁

当视口缩小到小于我为某些元素指定的尺寸时，我遇到了背景颜色异常的问题。虽然滚动条正确显示，但背景不是我所期望的。当视口与预期一样大或更大时，背景的行为将符合预期。使用 Firebug 检查页面元素时，即使元素内部的内容是，该元素似乎body也没有拉伸。是什么导致背景以这种方式表现？

我已经提供了我认为相关的 html 和 CSS，但如果我遗漏了某些内容，请告诉我。

缩小视口示例

放大视口示例

CSS

HTML

这是一个 extjs 单页应用程序，在 FF、IE 和 Safari 中运行良好。

在 iphone 中查看或使用这个 extjs 应用程序有几个问题。extjs 面板/窗口不会像在普通屏幕中那样调整大小。当用户缩小时，扩大的查看区域被消隐。示例图像如下：

• Iphone 无法识别 extjs 的组合框。
• 无法向下滚动。

视口问题：主要问题是视口。它不能在 Iphone 中正确滚动或缩放。

我的网站的 HTML 标记上有一个 CSS 边框，当我在 iPhone 上查看它时，它没有将边框视为宽度的一部分，并且某些 div 的重叠与内容和侧面之间有 10px 的间隙相反的屏幕。我使用了元视口标签

这很好用，因为它现在所有的排列都很完美，但是当我以横向模式查看站点时，站点没有居中，它从左对齐开始，所以在滚动之前你只能看到一半的站点。

以横向模式查看网站时，如何使网站布局居中？

在 iPad 等移动设备上，我想禁用仅在支持 position:fixed 时才有效的功能。有没有办法在不使用用户代理字符串的情况下检测这些设备？原因是我想尽可能避免搜索 iPad、iPhone、iPod、Android 等。

在使用 Safari 的 iPad 上，转到此页面：http: //ifelse.org/projects/errors/viewport/test.html

这是来源：

它应该看起来像这个图像，其中viewport1030 像素在纵向模式下完全可见：

1. 点击书签图标(+)
2. 点击添加到主屏幕
3. 创建书签。打开书签，网页将以 webapp 模式全屏打开。

该viewport标签基本上被忽略了。我已经尝试了多种使用设备和混合像素值的变体。没有。

那么......这是一个错误还是一个功能？

如果这是 Apple 有意为之，那么它本质上意味着要正确开发美观的 Web 应用程序，您需要使用 768px 的实际宽度...？

我有一个由 jquery scrollTo 插件驱动的 1page 网站，我想这对我来说无关紧要。问题似乎是 1page 设计。如果我单击选项卡，整个设计就会一团糟，因为选项卡会跳转到它可以找到的任何关注点。这包括当前视口区域之外的地方。
实际上，在您单击第一个表单字段后，我不希望选项卡专注于我的#contactForm div 之外的任何内容。该选项卡可以专注于此，但前提是哈希“#contact”在视口内。有没有办法实现这样的事情，或者选项卡/焦点的事情总是弄乱处理视口区域之外内容的 1 页面设计？

也许一些想法可以帮助我更好地理解这个问题

当我设置最大比例并且来回旋转方向时，网页不在手机上居中。

所以使用这段代码

如何模仿 margin: 0 auto; 的 CSS 效果。

我有一个带有图形和引用的 LaTeX 文档：

我使用 hyperref 包在生成的 PDF 中获取超链接。但是，指向该图的链接导航到标题，使该图本身不在视图中。如何让它导航到图形的开头而不将标题移动到顶部？

我试图让我的 UIWebView 的内容适合屏幕。我尝试了两种方法。首先，我尝试使用加载的 html 中的视口元标记来设置视口宽度：

在我将模拟器和手机更新到 4.2 之前，这种方法有效。

我还尝试将显示 html 的 UIWebView 的 scalesPageToFit 设置为 YES。

这两个选项都不起作用。如 document.documentElement.clientWidth 所示，宽度设置为 480

有任何想法吗？