Я работаю над одностраничным веб-приложением, которое чаще всего будет использоваться на мобильных устройствах. Одной из его функций является режим карты, который временно занимает все окно браузера; шкала расстояний и некоторые элементы управления прикреплены к четырем углам карты. Вот небольшой скриншот карты, чтобы вы могли понять, о чем я говорю:
Карта реализована в виде <div>
со position: fixed
и все четыре координаты ноль; Я также временно установил значение <body>
в overflow: hidden
то время, когда карта видима, чтобы обрабатывать случай, когда отображение базового приложения прокручивается от источника. Этого достаточно, чтобы карта работала именно так, как я хочу в настольных браузерах. Мобильные браузеры также требовали, чтобы я дал мета-тег viewport с чем-то вроде "width=device-width,user-scalable=no"
того, чтобы сделать видимую область окна точно соответствующей области просмотра.
Все это прекрасно работало несколько лет назад, когда я первоначально написал это приложение, но где-то в этом направлении iOS Safari прекратил соблюдение любых параметров метапортпорта, связанных с масштабированием - очевидно, слишком много сайтов неправильно использовали тег, в результате чего текст, который был нечитабельно маленьким, еще не масштабируется. В настоящее время, если вы включите карту в этом браузере, вы, вероятно, получите слегка увеличенный вид, который обрезает эти кнопки справа и снизу - и вы ничего не можете с этим поделать, потому что все касания интерпретируются как жесты масштабирования / панорамирования для карты, а не прокрутка браузера. Карта не очень полезна без доступа к функциям с помощью этих кнопок, а без кнопки в верхнем правом углу вы даже не сможете закрыть карту. Единственный выход - перезагрузить страницу, что может привести к потере несохраненных данных.
Я определенно собираюсь добавить использование history.pushState
/, onpopstate
чтобы наложение карты велось как отдельная страница. Вы сможете выйти из режима карты, используя кнопку браузера «Назад», но это не решает остальную часть потери функциональности из-за отсутствия кнопок.
Я рассмотрел использование .requestFullscreen()
для реализации наложения карты, но это не поддерживается везде, где в противном случае приложение можно было бы использовать. В частности, это явно не работает на iPhone, а на iPad вы получаете строку состояния и огромную кнопку «X», наложенную на ваш контент - моя шкала расстояний, скорее всего, больше не будет читаться. Во всяком случае, это не семантически то, что я действительно хочу - мне нужно полное окно , а не полный экран.
Как получить полноэкранное отображение, работающее в современных браузерах? Вся информация, которую я могу найти по теме, говорит об использовании мета-тега viewport, но, как я уже говорил, больше не работает.
источник
Ответы:
Решение
Установите полноэкранную высоту div с
window.innerHeight
помощью JavaScript, а затем обновите ее при изменении размеров окна.Та же проблема здесь:
https://stackoverflow.com/a/37113430/8662476
Больше информации:
источник
Вы должны установить высоту тела и HTML на 100%
источник
Вы пробовали это?
источник
vw
ширину, а неvh
...) Какой элемент вы предлагаете мне добавить это? Я попробовал его в нескольких местах (<html>
,<body>
и карты<div>
), но не видит различий.попробуй это:
источник
shrink-to-fit=yes
это значение по умолчанию, и Safari больше не обращает внимания на параметры масштабирования.Поскольку я не могу комментировать, я хотел бы добавить, что вы должны проверить, соответствует ли ваш тег body высоте браузера. Вы также можете проверить это: Chrome / Safari не заполняет 100% высоты flex parent
источник
Это старое решение, и оно решает проблему, которая тесно связана, но не совсем одинакова, поэтому я не уверен, применимо ли это: https://github.com/gajus/brim
Предполагается, что это решение, похожее на minimal-ui.
Вот еще один вопрос, который ссылается на этот ответ: iOS 8 удалил свойство viewpoint «minimal-ui», есть ли другие «мягкие полноэкранные» решения?
Дайте мне знать, если это поможет.
источник
Попробуйте следующий код для div
источник
если вы используете,
position: fixed
просто используйте стандартный метод CSS, который существует уже много лет.Это просто сделает размер div автоматически равным полному размеру области просмотра, и, используя опцию исправления, она заблокирована на месте, независимо от того, сколько они прокручивают, вы можете отключить прокрутку тела, если вам нужно с
поэтому, если вы просто добавите класс noScroll в тег html, он отключит прокрутку. затем, когда вы захотите снова прокрутить, вы можете.
источник
Вы можете реализовать это, используя двухслойную структуру для элементов управления карты и слоя карты. Это означает, что вам на самом деле не нужно ничего
javascript
для реализации того, что вы хотите (хотя в вопросе не было приведено ни одного примера кодирования). Вы можете манипулировать окном просмотра,CSS
и это фактическое значениеvw
иvh
для того, чтобы ответить на ваш комментарий. Как 100vw / 100vh должен помочь? , это может помочь, посколькуv
расшифровывается как viewport.Посмотрите фрагмент, например.
PS: слой карты моделируется изображением, которое увеличивается при прокрутке.
источник