Предотвратить, что фиксированный элемент изменяет размеры при масштабировании на сенсорном экране

Question

На 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

Demo to this answer
Dialog widget library I wrote based on this answer.
Demo for the dialog widget Попробуйте на мобильном устройстве, увеличьте масштаб и коснитесь ссылки.

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

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

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

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

Это будет масштабировать элемент обратно масштаба 1 отношение относительно текущего видового экрана зумом, но это вероятно, он по-прежнему неправильно размещен на странице. Это означает, что мы должны получить новые значения для его позиции. То, что на самом деле произойдет на экране, зависит от значения позиции 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'; 

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

Answer 3

Я ищу, чтобы сделать то же самое, что @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 или дивы, что вы хотите & костюм для ваших нужд ,

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

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