Geek Answers Handbook

Detect if browser supports position: fixed

Is there any reliable method to detect if the browser supports position fixed ?

I found some solutions, but none of them work well in all browsers.

+7
source share
5 answers

When developing a mobile application with jQuery Mobile, I had the same problem. The headers should have a fixed position (if supported by the browser), and the solution was to set the default position: fixed headers in css and check the supported property in the following way:

 function isPositionFixedSupported() { return $( '[data-role="header"]' ).css( 'position' ) === 'fixed'; }

The return value is static if it is not supported by the browser.

+9
source

This code works fine. Just tested it in a Windows ME window with IE6, returns "null" because IE6 does not support position:fixed; .

By the way, this is NOT originally my code. ALL credits go to Kangax Github , which has many functions for checking browser functions.

 function () { var container = document.body; if (document.createElement && container && container.appendChild && container.removeChild) { var el = document.createElement("div"); if (!el.getBoundingClientRect) { return null; } el.innerHTML = "x"; el.style.cssText = "position:fixed;top:100px;"; container.appendChild(el); var originalHeight = container.style.height, originalScrollTop = container.scrollTop; container.style.height = "3000px"; container.scrollTop = 500; var elementTop = el.getBoundingClientRect().top; container.style.height = originalHeight; var isSupported = elementTop === 100; container.removeChild(el); container.scrollTop = originalScrollTop; return isSupported; } return null; }

If it starts, it works, and if not, you get zero.

+3
source

Does something like this work in mobile browsers?

 function isFixedPositionSupported() { var e = document.createElement('div') try { e.style.position = 'fixed' return e.style.position == 'fixed' } catch (exception) { return false } }
+1
source 
 var supportFixed = (function () { var elem = document.createElement('div'); elem.style.cssText = 'position:fixed'; if (elem.style.position.match('fixed')) return true; return false; }());
+1
source

Ohgodwhy code is correct, but for iOS you can check the user agent and see if it is iOS Safari. Then return that it is supported. User Agent Strings

 Mozilla/5.0 (iPhone; CPU iPhone OS 5_0 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9A334 Safari/7534.48.3 Mozilla/5.0 (iPad; CPU OS 5_0 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9A334 Safari/7534.48.3 Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_0 like Mac OS X; en-us) AppleWebKit/532.9 (KHTML, like Gecko) Version/4.0.5 Mobile/8A293 Safari/6531.22.7

I'm not sure how to code this, but I'm sure this is what you need to do to detect iOS.

-one
source

More articles:


All Articles