Есть ли какой-либо надежный метод для обнаружения, поддерживает ли браузер position fixed
?Определить, поддерживает ли браузер положение: исправлено
Я нашел некоторые решения, но ни один из них не работает хорошо во всех браузерах.
Есть ли какой-либо надежный метод для обнаружения, поддерживает ли браузер position fixed
?Определить, поддерживает ли браузер положение: исправлено
Я нашел некоторые решения, но ни один из них не работает хорошо во всех браузерах.
При разработке мобильного приложения с jQuery Mobile у меня была та же проблема. Заголовки должны иметь фиксированные позиции (если поддерживается браузером) и раствор, чтобы установить заголовки с умолчанию position: fixed
на CSS и проверены на носителе свойство через следующий метод:
function isPositionFixedSupported() {
return $('[data-role="header"]').css('position') === 'fixed';
}
возвращаемое значение static
если не поддерживается браузером.
Этот код работает полностью нормально. Просто протестировал его в окне Windows ME с IE6, возвращает «null», потому что IE6 не поддерживает position:fixed;
.
, кстати, это НЕ изначально мой код. ВСЕ кредиты переходят наKangax's Github, у которого есть много функций для проверки функций браузера.
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;
}
Если она работает, она работает, если это не так, вы получите нуль.
Это решение не работает на iOS 5. –
Это потому, что IOS5 - непостоянная женщина. Пожалуйста, ознакомьтесь с документами относительно [position: fixed и jQM последнего распространения] (http://jquerymobile.com/blog/2012/04/13/announcing-jquery-mobile-1-1-0/) – Ohgodwhy
Является ли это единственным известным вопрос? Безопасно ли использовать этот метод, за которым следует исключение для iOS 5? –
Код Ohgodwhy правильный, но для iOS вы можете проверить агент пользователя и посмотреть, является ли это iOS Safari. Затем верните, что он поддерживается. Строки пользовательского агента
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
Я не уверен, как код, но я уверен, что это то, что вам нужно сделать, чтобы обнаружить IOS.
Обнюхивание устройства не является и никогда не станет надежным способом обнаружения во всех браузерах. – user2867288
Что-то вроде этого работает на мобильных браузерах?
function isFixedPositionSupported() {
var e = document.createElement('div')
try {
e.style.position = 'fixed'
return e.style.position == 'fixed'
} catch (exception) {
return false
}
}
Не работает, возвращается всегда верно, даже если оно не поддерживается. –
Работайте в Firefox и Chrome. – fred727
var supportFixed = (function() {
var elem = document.createElement('div');
elem.style.cssText = 'position:fixed';
if (elem.style.position.match('fixed')) return true;
return false;
}());
Кажется, это лучшее решение для меня. Я использовал jquery в безопасности. var $ test = $ ("
"); $ ("body"). Append ($ test); $ test.css («позиция», «фиксированная»); var supportFixed = $ test.css ("position") === "fixed"; $ test.remove(); --- но это не решило мою проблему.ios4 говорит, что он поддерживает фиксированный, даже если он этого не делает. –Дает ложное позиционирование на iPad из-за его псевдоподдержки позиции: исправлено – nebulousGirl
Для какого элемента? –
Вы имеете в виду что-то для * липкого нижнего колонтитула * или аналогичного? –