确定视口或“标准”浏览器的最佳方法

Question

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

不幸的是，这与iPad的情况相同。我认为其他Android平板电脑也是如此。

每次都不是浏览器嗅探，是否有一种简单的方法来确定浏览器是否有视口或是否是标准视图？

Answer 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。

Answer 2

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

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