確定視口或「標準」瀏覽器的最佳方法

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/