Запретить масштабирование в мобильном браузере одного HTML-элемента

Question

Мне интересно, знает ли кто-нибудь, как можно предотвратить масштабирование браузером определенных элементов страницы.

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

Единственное, с чем я столкнулся, это следующий CSS, но, похоже, это не сработало, когда я попробовал: -webkit-text-size-Adjust: нет;

Я не хочу отключать изменение размера всей страницы через метатег Viewport, я просто хочу настроить таргетинг на элементы меню html строки меню.

Answer 1

Механизм масштабирования варьируется в разных браузерах, не стандартизирован и не поддерживает скрипты.Любое решение было бы довольно запутанным для работы через браузеры.Нет простого способа сделать это.

Answer 2

Я написал модальное диалоговое окно, основанное на похожем вопросе, вы можете найти его здесь .

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