css bug Предотвращение изменения размера фиксированного элемента при масштабировании на сенсорном экране




touch-action ios safari (3)

На веб-сайте HTML у вас есть фиксированный элемент:

<div id="fixed">
  <p>Some content</p>
</div>

Он имеет этот CSS:

#fixed { height:150px; position:fixed; top:0; left:0; z-index:10000; }

Когда вы просматриваете эту страницу на мобильном устройстве (или любом устройстве с сенсорным экраном), и вы увеличиваете масштаб экрана, фиксированный элемент масштабируется вместе со всем остальным контентом (он становится больше). Когда вы приближаетесь достаточно далеко, он становится настолько большим, что он почти полностью перекрывает все содержимое под ним.

Практический пример использования - это интерфейс, такой как фиксированная панель навигации сверху, или плавающая кнопка в углу экрана.

Как можно предотвратить изменение размера одного элемента в браузере и заставить его оставаться неизменным в любое время?


Answer #1

Вам не хватает атрибута ширины, и вы можете использовать такие вещи, как max-width и max-height, чтобы сохранить размер нужного размера. Тем не менее, масштабирование позволяет пользователю получить довольно подробную страницу, поэтому всегда будет шанс, что у них есть эта проблема.

#fixed { height:150px; width: 200px; max-width: 200px; max-height: 150px; position:fixed; top:0; left:0; z-index:10000; }

Answer #2

Я хочу сделать то же самое, что @bobsoap пытался сделать, но мое решение следующее:

1. Отключите масштабирование в теге просмотра:

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" />

2. Используйте плагин, например: TouchSwipe.js:

https://github.com/mattbryson/TouchSwipe-Jquery-Plugin

И только увеличьте Div или Divs, которые вы хотите и удовлетворяете вашим потребностям.

У меня есть 2 divs на странице (слева и справа). Левый div имеет фиксированное меню прокрутки, а справа - небольшой текст и изображения. Я хочу ущипнуть / увеличить масштаб и иметь только правый зум, чтобы пользователь мог читать текст в случае необходимости. Вместо того чтобы сделать весь видовой экран масштабируемым и отключить масштабирование на моем левом div, я делаю все наоборот: сделайте только мой правый div, масштабируемый с помощью плагина TouchSwipe.

Я поделюсь своим кодом, когда я закончу, если кто-то заинтересован в том, как я реализовал плагин TouchSwipe.


Answer #3

Демонстрация этого ответа
Диалоговую виджетную библиотеку я написал на основе этого ответа .
Демо для виджета диалогового окна Попробуйте на мобильном устройстве, увеличьте масштаб и коснитесь ссылки.

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

window.addEventListener('scroll', function(e){ /* coming next */ })

Мы вычисляем коэффициент масштабирования и применяем его к перемасштабированному элементу в качестве преобразования CSS3:

el.style["transform"] = "scale(" + window.innerWidth/document.documentElement.clientWidth + ")";

Это изменит масштаб элемента назад на коэффициент масштабирования по отношению к текущему масштабу просмотра, но, скорее всего, он по-прежнему неправильно размещен на странице. Это означает, что мы должны получить новые значения для его позиции. То, что на самом деле произойдет на экране, зависит от значения позиции CSS элемента, fixed будет вести себя иначе, чем absolute и на мобильном Safari конкретно, fixed позиция имеет дополнительный эффект сглаживания при увеличении страницы, что создает некоторые неудобные проблемы для этой причины - Я хотел бы предложить, чтобы элемент высоты 100% содержимого был relative родителем для вашего предполагаемого масштабированного элемента, а затем в вашем скрипте разместите свой элемент absolute внутри родителя. Для примера этого примера используются следующие значения:

overlay.style.left = window.pageXOffset + 'px';
overlay.style.bottom = document.documentElement.clientHeight - (window.pageYOffset + window.innerHeight) + 'px';

Вы также можете обратить внимание на использование свойства CSS transform-origin зависимости от того, с какой точки привязки вы хотите, чтобы масштабирование вступило в силу - это напрямую влияет на выравнивание.





touch