最好的方法，以确定是否视口或“标准”的浏览器 [英] Best method to determine if viewport or 'standard' browser

问题描述

所以，现在大家都知道iOS的移动Safari使用视口（一样的Andr​​oid浏览器），而不是一个标准的浏览器窗口。这会导致问题溢出：隐藏和位置：固定

So, by now we all know that iOS mobile Safari uses viewports (as does Android browser), rather than a 'standard' browser window. And this causes issues with overflow:hidden, and position:fixed.

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

This unfortunately is the same case with the iPad. I presume this is the case for other Android tablets too.

而不是浏览器嗅探每一次，有一个简单的方法来确定该浏览器有一个视口，或者如果它是标准的？

Rather than browser sniffing each time, is there an easy way to determine if the browser has a viewport or if it is standard?

推荐答案

遗憾的是，目前的手机浏览器支持不足没有很好的修复程序的的位置是：固定。究其原因的位置是：固定是摆在首位断，是因为＆mdash;除其他事项外＆mdash;没有浏览器厂商知道究竟如何处理文档放大时，会发生什么情况。如果你有时间做一些阅读，我强烈推荐以下相关文章，其中会说明浏览器的视口和周围很大，细致入微的移动固定定位的问题：

Unfortunately, there's currently no good fix for mobile browsers' lack of support for position:fixed. The reason position:fixed is "broken" in the first place is because—among other things—no browser vendor knows exactly how to handle what happens when zooming in on the document. If you have some time to do some reading, I highly recommend the following articles, which will explain browser viewports and the problems surrounding fixed positioning on mobile in great, painstaking detail:

• 的两个视口＆ndash的的故事;第二部分＆mdash;视工作和移动浏览器的问题是如何。 （如果你不熟悉的桌面浏览器的视口或想要的背景资料，又见第一部分。）
• 确实解释了出色的工作的第五个位置值问题周围的的位置是：固定在移动浏览器，并提出我们可能需要一个新的位置值ndash的; 设备固定。

• A tale of two viewports – part two — how viewports work and the problem of mobile browsers. (If you're not familiar with viewports in desktop browsers or want the background info, see also part one.)
• The fifth position value does a fantastic job of explaining the problems surrounding position:fixed in a mobile browser, and suggests we might need a new position value – device-fixed.

这些文章将会给你的为什么的，但不是的如何解决它的。对于一个真正的固定的位置，您最倒霉。但是，如果你的目标是低于滚动内容的固定工具栏，有数的方式来破解它。我已经与 iScroll 。

Those articles will give you the why, but not the how to fix it. For a truly fixed position, you're mostly out of luck. However, if your goal is to have a fixed toolbar below scrolling content, there are a few ways to hack it. I've had success with iScroll.

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

The correct way to determine if you are running on a touch-based device is the following feature detection:

var isTouch = ('ontouchstart' in window);

ontouchstart 是被炒移动事件Safari和Android浏览器。它不是在桌面浏览器，在那里你可以使用溢出present：汽车和定期滚动条。如果 isTouch 是真实的，你就可以使用iScroll。

ontouchstart is an event fired in mobile Safari and the Android browser. It is not present on desktop browsers, where you can just use overflow:auto and have regular scrollbars. If isTouch is true, you can then use iScroll.

这篇关于最好的方法，以确定是否视口或“标准”的浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！