Лучший способ определить, является ли область просмотра или «стандартный» браузер - PullRequest
3 голосов
/ 12 апреля 2011

Итак, теперь мы все знаем, что iOS Safari для мобильных устройств использует окна просмотра (как и браузер Android), а не «стандартное» окно браузера.И это вызывает проблемы с overflow:hidden и position:fixed.

Это, к сожалению, тот же случай с iPad.Я предполагаю, что это относится и к другим планшетам Android.

Вместо того, чтобы каждый раз анализировать браузер, есть ли простой способ определить, есть ли в браузере область просмотра или она стандартная?

Ответы [ 2 ]

3 голосов
/ 12 апреля 2011

К сожалению, в настоящее время нет хорошего решения проблемы отсутствия поддержки мобильных браузеров для position:fixed. Причина, по которой position:fixed в первую очередь «сломана», заключается в том, что - среди прочего - ни один поставщик браузеров не знает точно, как справиться с тем, что происходит при увеличении масштаба документа. Если у вас есть время для чтения, я настоятельно рекомендую следующие статьи, в которых подробно и кропотливо описываются области просмотра браузера и проблемы, связанные с позиционированием fixed на мобильных устройствах:

В этих статьях вы найдете почему , но не как это исправить . Для действительно fixed позиции вам в основном не повезло. Однако, если ваша цель состоит в том, чтобы закрепить панель инструментов ниже прокрутки контента, есть несколько способов взломать ее. У меня был успех с iScroll .


Редактировать: Правильный способ определить, работаете ли вы на сенсорном устройстве, - это обнаружение следующих функций:

var isTouch = ('ontouchstart' in window);

ontouchstart - это событие, запущенное в мобильном браузере Safari и браузере Android . Его нет в настольных браузерах, где вы можете просто использовать overflow:auto и иметь обычные полосы прокрутки. Если isTouch истинно, вы можете использовать iScroll.

0 голосов
/ 12 апреля 2011

Попробуйте медиазапросы: вы можете включать таблицы стилей или условно применять части таблицы стилей, основываясь на измерениях устройства и области просмотра, о которых сообщает браузер.

Эта статья дает достаточно приличное введение: http://www.alistapart.com/articles/responsive-web-design/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...