Включить реальное фиксированное позиционирование в браузерах Samsung Android
Браузер Android, начиная с версии 2.2, поддерживает фиксированное позиционирование, по крайней мере, при определенных обстоятельствах, например, когда масштабирование отключено. У меня есть простой HTML файл без JS, но фиксированное позиционирование на трех телефонах Samsung, которые я пробовал, просто неверно. Вместо истинного фиксированного позиционирования, заголовок прокручивается вне поля зрения, а затем снова встает на место после прокрутки.
Это не происходит в эмуляторе Android SDK для любой конфигурации, которую я тестировал (2.2, 2.3, 2.3 x86, 4.0.4). Это также не происходит при использовании WebView в приложении на телефонах Samsung: в таких случаях позиционирование работает, как ожидалось.
Есть ли способ заставить браузер Android Android "использовать" реальное фиксированное позиционирование?
Я тестировал:
1. Samsung Galaxy 551, Android 2.2
2. Samsung Galaxy S, Android 2.3
3. Samsung Galaxy S II, Android 2.3
Пример кода:
<html>
<head>
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no,width=device-width,height=device-height">
<style>
h1 { position: fixed; top: 0; left: 0; height: 32px; background-color: #CDCDCD; color: black; font-size: 32px; line-height: 32px; padding: 2px; width: 100%; margin: 0;}
p { margin-top: 36px; }
</style>
</head>
<body>
<h1>Header</h1>
<p>Long text goes here</p>
</body>
</html>
Ожидаемое поведение заключается в том, что серый заголовок заполняет верхнюю часть экрана и остается вне зависимости от того, сколько вы прокручиваете. В браузерах Samsung Android, похоже, прокручивается вне поля зрения, а затем всплывает на место после прокрутки, как если бы фиксированное позиционирование моделируется с помощью Javascript, а это не так.
Edit
Судя по комментариям и "ответам", кажется, что я не совсем понял, что мне нужно. Я ищу метатег или css rule/hack или javascript toggle, который отключает фиксированное позиционирование Samsung и включает браузер Android, работающий с фиксированной позицией. Я не ищу решение Javascript, которое добавляет разбитое фиксированное позиционирование в браузер, который не имеет никакой поддержки; фиксированное позиционирование Samsung делает это уже, это выглядит просто глупо.
Ответы
Ответ 1
Возможно, вы могли бы рассмотреть другой подход, который не требует фиксированного позиционирования...
Добавьте прокрутку к элементу абзаца вместо элемента body (по умолчанию). Затем вы можете поместить элемент абзаца прямо под заголовком. Это гарантирует, что заголовок всегда отображается в верхней части страницы, но позволяет прокручивать текст в абзаце.
h1 {
height: 20px;
}
p {
position: absolute;
top: 20px;
left: 0px;
right: 0px;
bottom: 0px;
overflow-y: auto;
}
Ответ 2
Я думаю, что лучший способ для браузера android 2.2 реализовать javascript.
Вы можете найти более подробную информацию по этой ссылке. Речь идет о фиксированном позиционировании во всех мобильных браузерах.
http://bradfrostweb.com/blog/mobile/fixed-position/
Ответ 3
В своем комментарии к статье Брэда Фроста Мэтью Холлоуэй предлагает решение в соответствии с ответом Аниты Фоли, но с polyfill для переполнения: auto, где не поддерживается. Посмотрите здесь:
http://bradfrostweb.com/blog/mobile/fixed-position/
Ответ 4
Это не сломанный браузер Samsung Android, это Android 2.2, у которого есть сломанная поддержка.
В общем, как вы знаете, позиция: фиксированная была и в некоторых случаях до сих пор довольно нарушена во многих мобильных устройствах/системах.
Чтобы ответить на ваш вопрос, нет "переключателя или метатега", который "включит браузер Android, работающий с фиксированной позицией". Если браузер не поддерживает что-то, тогда нет "переключения", чтобы "переключить" его. Это не особенность.
В противном случае вы можете использовать http://cubiq.org/iscroll-4, который имитирует его.
(изменить: некоторые факты)
Вы предполагаете, что SAMSUNG вводит проприетарный хак или модем, который нарушает действующую поддержку позиции, зафиксированной в браузере Android. Это кажется маловероятным, независимо от 3 пунктов выше.
Ответ на самом деле прост: есть частичная (багги) поддержка, и единственным решением является использование библиотеки javascript, которая заменяет или "исправляет" отверстие.