Подтвердить что ты не робот

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

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

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

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

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

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

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

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

4b9b3361

ОТВЕТЫ

Ответ 1

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

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

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

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

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

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

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

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

Ответ 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 или Div, которые вы хотите, и удовлетворяйте вашим потребностям.

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

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

Ответ 3

Для iOS 10 можно отменить событие touchmove.

element.addEventListener("touchmove", (ev) => {
  let zoomFactorX = document.documentElement.clientWidth / window.innerWidth;
  let zoomFactorY = document.documentElement.clientHeight / window.innerHeight;
  let pageHasZoom = !(zoomFactorX === 1 && zoomFactorY === 1);

  if(pageHasZoom) {
    // page is zoomed
    ev.stopPropagation();
    ev.preventDefault();
  }
});

Ответ 4

Эта библиотека microjs может быть полезна: Transe

Вот демонстрация этого.

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

Ответ 5

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

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