Определите, правильно ли работает «переполнение: авто» (мобильные браузеры) - PullRequest
1 голос
/ 08 февраля 2012

Я хотел бы определить «хорошим» способом (Modernizr, скорее всего, но неважно), должен ли макет иметь встроенные прокручиваемые области страницы, или же (для мобильного использования) следует просто передавать весь контент как один прокручиваемая масса.

Конкретный случай - это страница, похожая на «EULA», где есть форма с кнопкой «I ACCEPT» или чем-то еще, а затем масса отвратительных юридических заглавных букв. На большом экране я хотел бы, чтобы вся форма была видимой, поэтому я хотел бы поместить юридические элементы в собственную прокрутку. Тем не менее, на мобильном устройстве это было бы несколько уродливо (хотя я не эксперт по мобильному UX), поэтому я подумал о том, чтобы просто вставить все это в линию, чтобы пользователь мог читать текст (LOL) с помощью простых движений для прокрутки, а затем внизу кнопки прокручиваются в поле зрения.

Полагаю, я мог бы просто проверить связь с Modernizr, но это не совсем правильно.

edit & mdash; хотя я почти уверен, что то, что я описал, в любом случае, вероятно, будет выигрыш в удобстве использования, я обнаружил, что мои устройства Android не будут обращать никакого внимания на «переполнение: авто» на <div> в середине страница.

Ответы [ 2 ]

2 голосов
/ 04 мая 2012

Я выбрал подход, основанный на Modernizr.touch и Modernizr.overflowscrolling тестах. Если Modernizr вставляет классы touch и no-overflowscrolling в элемент html в DOM (или просто проверяет Modernizr.touch и Modernizr.overflowscrolling напрямую), тогда я избегаю overflow:auto. Это означает, что устройства Android, которые неправильно обрабатывают overflow:auto, не получают его.

Это может быть несовершенное решение; Там могут быть устройства, которые могут обрабатывать overflow:auto, которые не получают его в этом случае. Но это не совсем конец света, по крайней мере, в моем случае. И это, кажется, работает правильно для всех наиболее распространенных устройств / браузеров.

И оно обладает простотой. У меня уже был загружен Modernizr для других целей.

1 голос
/ 13 февраля 2014

Как уже говорили другие, Modernizr.overflowscrolling проверяет свойство overflow-scrolling css, а не проверяет, может ли устройство прокручивать содержимое в пределах div с использованием overflow: auto.

На самом деле, в моем недавнем тестировании Nexus 5 фактически возвращает Modernizr.overflowscrolling как false, поэтому на него нельзя положиться.

Этот очень маленький скрипт (без каких-либо зависимостей), кажется, обеспечивает сенсорную прокрутку для устройств (Android 2.3) без поддержки ... http://chris -barr.com / 2010/05 / scrolling_a_overflowauto_element_on_a_touch_screen_device /

Ссылка на репо: https://github.com/chrismbarr/TouchScroll

...