确定视口或“标准”浏览器的最佳方法
所以，现在我们都知道iOS移动版Safari使用视口（就像Android浏览器一样），而不是“标准”的浏览器窗口。 这导致overflow:hidden问题overflow:hidden ，和position:fixed 。
这不幸的是与iPad的情况相同。 我想这也是其他Android平板电脑的情况。
而不是每次浏览器嗅探，是否有一个简单的方法来确定浏览器是否有一个视口，或者如果它是标准的？
不幸的是，目前还没有很好的解决手机浏览器对position:fixed缺乏支持的问题position:fixed 。 原因position:fixed是“破碎”首先是因为 – 除其他事项外，没有浏览器供应商知道如何处理放大文档时发生的事情。 如果您有时间阅读，我强烈build议您阅读以下文章，这些文章将详细解释浏览器视口和移动设备fixed位置的问题：
- 两个视口的故事 – 第二部分 – 视口如何工作和移动浏览器的问题。 （如果您不熟悉桌面浏览器中的视口或需要背景信息，请参阅第一部分 。）
- 第五个位置值在解释周围
position:fixed的问题方面做了很好的工作position:fixed在移动浏览器中，并build议我们可能需要一个新的position值 –device-fixed。
这些文章会给你的原因 ，但不是如何解决它 。 对于一个真正fixed位置，你几乎是运气不好。 但是，如果您的目标是在滚动内容的下方有一个固定的工具栏，则有几种方法来破解它。 我已经成功与iScroll 。
编辑：确定您是否在基于触摸的设备上运行的正确方法是以下function检测：
var isTouch = ('ontouchstart' in window);
ontouchstart是在移动Safari和Android浏览器中触发的事件。 它不在桌面浏览器上，您可以使用overflow:auto并定期滚动条。 如果isTouch为true，则可以使用iScroll。
尝试媒体查询：您可以包含样式表，或根据浏览器报告的设备和视口尺寸有条件地应用样式表的某些部分。
本文给出了一个足够体面的介绍： http : //www.alistapart.com/articles/responsive-web-design/