确定视口还是“标准”浏览器的最佳方法答案

【问题标题】：Best method to determine if viewport or 'standard' browser确定视口还是“标准”浏览器的最佳方法
【发布时间】：2011-04-12 14:22:25
【问题描述】：

所以，现在我们都知道 iOS 移动 Safari 使用视口（与 Android 浏览器一样），而不是“标准”浏览器窗口。这会导致overflow:hidden 和position:fixed 出现问题。

不幸的是，iPad 也是如此。我想其他 Android 平板电脑也是如此。

除了浏览器每次都嗅探之外，有没有一种简单的方法可以确定浏览器是否有视口或是否是标准的？

【问题讨论】：

只是确认一下，不幸的是，媒体查询不是解决方案:(
即一台 1024 x 768 的笔记本电脑与一台 1024 x 768 的 iPad ......笔记本电脑没问题，不是视口，但 iPad 有视口
看起来你可能误解了什么是“视口”。每个浏览器都有一个viewport，而不仅仅是移动设备上的那些。 viewport 定义为呈现页面的浏览器窗口的一部分。此外，虽然some mobile browsers do render position:fixed incorrectly，但并非所有人都这样做。而且，overflow 与auto 和scroll 有问题，但hidden 没有问题。底线：详细说明您要完成的工作。
哦，对不起，乔什...这只是移动浏览器无法正确呈现它的一个案例，就像一个错误一样？还是选择的？
基本上...我是浏览器嗅探，判断浏览器是否为ipad，运行一些js强制使用js固定位置。但我真的不想使用浏览器嗅探，因为它对于 android webkit 也是一样的。我假设这些浏览器具有某种属性或变量来确定它们是否具有 funky 视口

标签： javascript android ios mobile cross-browser

【解决方案1】：

不幸的是，目前还没有很好的解决方法来解决移动浏览器不支持position:fixed 的问题。 position:fixed 首先被“损坏”的原因是——除其他外——没有浏览器供应商确切知道如何处理放大文档时发生的情况。如果您有时间阅读，我强烈推荐以下文章，这些文章将详细解释浏览器视口以及围绕fixed 在移动设备上定位的问题：

A tale of two viewports – part two — 视口如何工作以及移动浏览器的问题。（如果您不熟悉桌面浏览器中的视口或想要了解背景信息，另请参阅 part one。）
The fifth position value 出色地解释了移动浏览器中围绕 position:fixed 的问题，并建议我们可能需要一个新的 position 值 - device-fixed。

这些文章会告诉你为什么，而不是如何解决它。对于真正的fixed 职位，您大多不走运。但是，如果您的目标是在滚动内容下方有一个固定工具栏，则可以使用 a few ways 破解它。我在iScroll 上取得了成功。

编辑：确定您是否在基于触摸的设备上运行的正确方法是以下功能检测：

var isTouch = ('ontouchstart' in window);

ontouchstart 是在mobile Safari and the Android browser 中触发的事件。它不存在于桌面浏览器上，您可以只使用overflow:auto 并拥有常规滚动条。如果isTouch 为真，则可以使用 iScroll。

【讨论】：

嘿乔希，谢谢，是的，我想这有点像预期的......我正在使用 ipad 的 iscroll，通过浏览器嗅探，但希望有一个更清洁的修复，越来越多的平板电脑即将推出出.... :(
@sydlawrence：我添加了一些我以前使用过的特征检测代码。这应该更具前瞻性。

【解决方案2】：

尝试媒体查询：您可以包含样式表，或根据浏览器报告的设备和视口尺寸有条件地应用样式表的一部分。

这篇文章给出了足够的介绍：http://www.alistapart.com/articles/responsive-web-design/

【讨论】：

媒体查询不是我想要的，即 1024 x 768 的笔记本电脑与 1024 x 768 的 iPad ....