Как запретить масштабирование в браузере
с CSS: zoom: reset; Работает в Chrome (см. рабочий пример на этой странице) но он вообще не работает в Firefox.
в различных вопросах/ответах я также нашел
но это, похоже, работает только для мобильных устройств.
Как предотвратить масштабирование в разных браузерах?
@Skoua: эти ярлыки можно переопределить. Я успешно сделал (с window.onkeydown и e.preventDefault() ). Мой вопрос: как предотвратить масштабирование из меню браузера (Просмотр> Настройки масштабирования и т. Д.)
Просто послушайте 'ctrl' в сочетании с 'колесиком мыши' - большинство пользователей увеличивают и уменьшают масштаб, удерживая нажатой клавишу Ctrl и прокручивая колесико. для тех, кто идет до конца в меню увеличить/уменьшить масштаб - пусть будут :)
Если бы это было на флешке, то другое дело. Несмотря на это, я пытался создать скрипт, который определяет уровень масштабирования браузера и применяет противоположный эффект с помощью css, используя zoom , но это сложнее, чем я думал. (используя tombigel.github.io/detect-zoom)
Я могу так же легко изменить размер окна браузера или изменить свое разрешение, что с точки зрения макета имеет тот же эффект, что и масштабирование. Так что же вы на самом деле пытаетесь предотвратить? Вы действительно пытаетесь заставить свой сайт работать только с одним разрешением?
@David: вот мой веб-сайт, вы поймете, почему я хочу избежать «стандартного» масштабирования браузера: bigpicture.bi/demo
Я думаю, что вы можете сделать, это прослушать событие масштабирования браузера (ctrl + "+"), а затем проверить window.devicePixelRatio.
Затем, соответственно, примените преобразование масштаба HTML5 к элементу body, чтобы уменьшить масштаб в том же соотношении. Таким образом, в основном вы не можете предотвратить функциональность, но вы можете применить отрицательный эффект с той же величиной.
Я обновил код Код Виджая:
Это решение является кроссплатформенным (ОС/Win) для десктопных браузеров.
Это предотвращает масштабирование, отличная работа, но если вы действительно попытаетесь прокрутить масштабирование, оно все равно увеличится в хроме.
На моем макбуке я зажимаю трекпад (одновременно перемещая два пальца по трекпаду друг от друга) - браузер вызывает событие "mousewheel" и скрипт не работает, потому что crtlKey не нажата (ни клавиша Cmd).
Итак, как уже упоминалось, это действительно невозможно. Тем не менее, есть несколько способов, которыми вы все еще можете быть умнее.
Три из пяти основных браузеров позволяют вам видеть уровень масштабирования браузера, более того, если масштаб браузера window.onresize запускается.
Я думаю, что вещи после OR работают, основываясь на том, что я заметил, когда бездельничал. Первые, которые я знаю, работают, по крайней мере, в последней версии каждого из них. Обратите внимание, что в Safari и Opera есть devicePixelRatio , однако оба они никогда не меняются. Это всегда просто 1 .
Вышеупомянутый простой способ, если вас это не волнует. Если вы это сделаете, вы можете попробовать detect-zoom , на который я наткнулся, когда искал решения для Safari и Opera.
Итак, теперь вы можете получить уровень масштабирования, а затем сместить его туда, где он ничего не делает. Поэтому, если я заставлю свой браузер увеличить масштаб на 50%, вы просто увеличите его до 200%. Таким образом, никаких изменений. Конечно, это будет немного сложнее, вам нужно будет сохранить последний масштаб браузера, новый масштаб браузера и выполнить несколько более сложную математику, но на основе того, что у вас уже есть, это должно быть проще простого.
Другая идея может заключаться в том, чтобы просто прослушивать событие изменения размера и вычислять его на основе нового видимого размера, но это может вызвать проблемы, если размер окна просто изменен. Я думаю, что приведенное выше будет вашим лучшим вариантом, возможно, с запасным вариантом alert , чтобы предупредить пользователя не увеличивать масштаб, если это необходимо.
Это, вероятно, лучший способ, который охватывает все сценарии. И скрипт detect-zoom не работает с новыми версиями Chrome и Firefox. Но, как заявлено, Safari и Opera поддерживаются.
с CSS: zoom: reset; работает для Chrome (см. рабочий пример на этой странице ), но совсем не работает в Firefox.
в различных вопросах / ответах я также нашел
но, похоже, это работает только для мобильных устройств.
Как предотвратить масштабирование кроссбраузерности?
@Skoua: эти ярлыки можно переопределить. Я успешно сделал (с window.onkeydown и e.preventDefault() ). У меня вопрос: как запретить масштабирование из меню браузера (Вид> Настройки масштабирования и т. Д.)
просто слушайте ' ctrl ' в сочетании с ' колесом мыши ' - большинство пользователей увеличивают и уменьшают масштаб, удерживая ctrl и прокручивая колесо . для тех, кто доходит до меню, чтобы увеличивать / уменьшать масштаб - пусть они будут :)
Если бы это было на флеш-памяти, это была бы другая история. Несмотря на это, я пытался создать сценарий, который определяет уровень масштабирования браузера и применяет противоположный эффект с использованием css, zoom но это сложнее, чем я думал. (используя tombigel.github.io/detect-zoom )
Я могу так же легко изменить размер окна браузера или изменить свое разрешение, что в плане макета имеет тот же эффект, что и масштабирование. Так что вы на самом деле пытаетесь предотвратить? Вы действительно пытаетесь заставить свой сайт работать только с одним разрешением?
@David: вот мой сайт, и вы поймете, почему я хочу избежать "стандартного" масштабирования браузера: bigpicture.bi/demo
На самом деле я не нашел «авторитетного» ответа, означающего четкое заявление разработчиков браузера. Однако все ответы на похожие вопросы, которые я нашел (например, тот или другой ), предполагают одно и то же - функция масштабирования браузера существует для пользы пользователей, а некоторые браузеры (например, Firefox) просто не позволяют вам, поскольку создатель веб-сайта, чтобы лишить их этой возможности.
Эта документация может пролить свет на то, почему разрешение авторам отключать масштабирование может быть хорошей идеей на мобильных устройствах, но не на настольных компьютерах.
Короче говоря, вам может потребоваться запретить мобильным устройствам изначально автоматическое масштабирование вашего веб-сайта, если вы знаете, что их рассчитанное автоматическое масштабирование будет неуместным. На настольных компьютерах нет автоматического масштабирования, поэтому, когда пользователи заходят на ваш сайт, они видят его именно таким, каким он должен был быть виден. Если они затем решат, что им нужно увеличить страницу, нет веских причин, чтобы вы позволяли им это сделать.
Что касается перечисленных вами решений:
- zoom - нестандартное свойство, не поддерживаемое Firefox , и
- касается только устройств , на которых расположение окна просмотра и визуального окна просмотра являются не то же самое , то есть мобильные устройства.
Приложение, которое вы указали в вопросе, посвящено масштабированию, что делает мой ответ менее актуальным для вашей конкретной ситуации. Тем не менее, я полагаю, что в целом это может быть полезно.
Вы можете отключить масштабирование в браузере при использовании Ctrl + + или Ctrl + - или Ctrl + mouse wheel up или Ctrl + mouse wheel down с этим кодом.
Посмотрите демо здесь: JSFiddle .
Я думаю, что вы можете сделать, это прослушать событие масштабирования браузера (ctrl + "+"), а затем проверить window.devicePixelRatio.
Затем, соответственно, примените преобразование масштаба HTML5 к элементу body, чтобы уменьшить масштаб в том же соотношении. Таким образом, в принципе вы не можете предотвратить функциональность, но вы можете применить негативный эффект с той же силой.
Вставьте в свой HTML следующее:
Для мобильных устройств: вставьте между тегами « . head> ».
Для настольных компьютеров в браузерах: вставьте сразу после начального тега . '.
Итак, как уже упоминалось, это действительно невозможно. Тем не менее, есть несколько способов, которыми вы все же можете быть осторожны.
Все три из пяти основных браузеров позволяют вам видеть уровень масштабирования браузера, кроме того, если браузер будет увеличен, запускается событие window.onresize .
Я думаю, что работа после OR работает на основе того, что я заметил, когда возился. Первые, которые я знаю, работают по крайней мере с последней версией каждого из них. Обратите внимание, что Safari и Opera имеют оба devicePixelRatio , но никогда не меняются. Это всегда просто 1 .
Выше это простой способ , если вы не заботитесь , что много. Если да, то вы можете попробовать скрипт detect-zoom , с которым я столкнулся, когда искал решения для Safari и Opera.
Итак, что вы теперь можете сделать, это получить уровень масштабирования, а затем сместить масштаб так, чтобы он ничего не делал. Итак, если я заставлю свой браузер увеличить масштаб на 50%, вы просто перейдете на 200%. Таким образом, без изменений. Конечно, это будет немного сложнее, вам нужно будет сохранить последнее масштабирование браузера, новое масштабирование браузера и выполнить немного более сложную математику, но, исходя из того, что у вас уже есть, это должно быть проще простого.
Другая идея может заключаться в том, чтобы просто прослушивать событие изменения размера и вычислять на основе нового видимого размера, но это может вызвать проблемы, если размер окна просто изменяется. Я думаю, что приведенное выше будет вашим лучшим вариантом, возможно, с запасным вариантом, alert чтобы предупредить пользователя, чтобы он не увеличивал масштаб, если это необходимо.
Не могу никак найти,как убрать функцию масштабирования странички при уменьшении размеров браузера,а то практически весь сайт в кашу превращается.
Масштабирование сайта как в Acrobat
Если в Adobe Acrobat масштабировать страницу до минимума, двигая правый нижний угол, то страница.
Как убрать масштабирование формы?
С помощью Form->ScaleBy(150,100); Делается масштаб 150%. Как вернуть обратно к 100%? Если кнопке.
Авто- масштабирование
Всем доброго времени суток. У меня такой вот вопрос: как можно сделать автомасштабирование, окон.
Как убрать масштабирование на видеокарте Ати
Всем привет! Недавно купил монитор Samsung Syncmaster S24B300 и подрубил к видеокарте MSI R6850.
Нужно стили прописать. Допустим у нас есть блок, которому мы хотим задать фиксированный размер.
// Создаем блок
Cвойство min-width и max-width управляют минимальным/максимальным значение.
Для таких мелких вопрос нужен гугл. Так и ответ быстрее найдешь, чем в форум писать.
Пробуйте мета - тегом.
Fedor92 это вроде бы метатег для мобильных устройств,мне нужен тот же эффект,только с обычного пк\ноута\т.п.
нужно что бы не только блоки,а вся страничка была статична при уменьшении окна браузера,вот пример,если плохо объясняю
Сайт только тогда статичен, когда размеры блоков задаются фиксированно, т. е. не в процентах, а в пикселях.
спасибо,сделали некое просвещение для меня,но а если пользователь с большим разрешением экрана зайдет на мой сайт,у него же все маленькое будет,вот я и в процентах пытаюсь задавать все,что бы у всех все одинаково было
Как правило сайты верстаются на разрешение 1000px. На больших мониках страницы таких сайтов размещаются по центру, а если человек не видит шрифт, например тогда на помощь приходит масштабирование. Когда вы делаете резиновый сайт при сужении экрана ширина и высота блоков начинают пересчитываться из-за этого они начинают "падать".
Вставьте этот элемент в стиль css.
Добавлено через 4 минуты
Fedor92,
Думаю это не так. Учитывая что большинство ОС являются WIN7 на рынке, то на нём легко перестроить масштабирование экрана. А большие мониторы в основном у опытных пользователей сети.
У меня на работе и дома 1920. И?
- ИМХО хрюш больше(особенно у китайцев ). Просто железо продают с семёрками, но люди которые не привыкли париться просят хрюшу.
И? Когда Вы просматриваете очередной сайт в нэте подстраиваете под него разрешение моника? Нет. А страница сайта располагается по центру окна браузера. Вот о чём речь идёт.
Разве что на старых сайтах, или на тех где костыли. Раньше тоже мучался, ну после WIN7 делаю масштабирование на 150% на точку и рай для глаз)
Разве что на сайтах где люди для пишут . Короче почти на всех. Самому любопытно посмотреть на фиксированный сайт на монике с шириной 2560px, который не выровняли по центру.
Я вижу Вы пока не в теме . Вас видимо название смущает. На самом деле автор спрашивает не про масштабирование, а почему при сужении окна браузера некоторые сайты остаются статичными(вёрстанные фиксированно), а его сайт рассыпается(сделанный с помощью резиновой вёрстки). Посмотрите внимательно фото, которые выложил ТС ранее. Вот ТС и спрашивает, что можно сделать, чтобы присужении окна браузера его сайт не распадался, как сайт на фото.
На этой странице небольшая подборка приемов, которые используют верстальщики. Это хитрости в HTML и CSS. Материал будет полезен новичкам. Здесь имеется информация о том, как сделать резиновый шаблон на CSS, как запретить масштабирование в браузере и как сделать шаблон сайта кроссбраузерным, как сделать отдельную таблицу стилей для IE.
Запрет на масштабирование
Здесь мы рассмотрим атрибут content тега meta. Он запретит масштабирование страницы мобильной версии сайта. Для этого в секцию head вставьте:
Атрибут name со значением viewport определяет, что этот запрет действует только в мобильных браузерах.
«Резиновое» строение шаблона
Для "резинового" строения необходимо изменить измерения в CSS с пикселов (px) на проценты (%). При этом, он будет отображаться независимо от ориентации смартфона (книжной или альбомной). Рассмотрим пример:
Он позволяет установить элемент с id равным footer для ширины области просмотра 768 пикселов параметр 100%. То есть, он будет отображаться во весь экран независимо от того, скольким пикселам (в данном примере, ориентировано на iPhone) равна ширина просмотра. Это правило не действует для ширины, например 782 пикселов с помощью правила max-width: 768px. Таким образом, min-width: 768px запрещает свойство для ширины
Кроссбраузерность
Кроссбраузерность в наше время очень важна в рекламных целях, ведь добрая четверть пользователей все еще пользуется Internet Explorer'oм, наладившим дела с JavaScript (версия > или =9), но не поддерживающим простой тег comment (вер. >9 и >4). Для добавления стилей для IE, добавьте в head вашего сайта простую строчку:
Это условие будет принято только для версии IE >7 благодаря оператору it. Если вы хотите, чтобы было больше 7 или равна 7, замените его на gte. Он укажет, что свойство действительно для IE > или =7.
На этом пока что все. Ну, а если Вы хотите больше, ставьте + в комментариях. Я знаю, что все это легко, но новичкам будет полезно. Спасибо за внимание.
Как отключить масштабирование на мобильной веб-странице с помощью HTML и CSS?
Функция масштабирования не всегда полезна. Одно из неудобств, с которым сталкиваются и разработчики, и пользователи, относится к масштабированию веб-страниц на мобильных устройствах. Мы поможем решить эту проблему. Можно использовать браузер Surefox для отключения этой функции, но все же страница будет масштабироваться при двойном нажатии на экран. Поэтому попробуйте следующие методы, используя HTML и CSS.
1. Как отключить масштабирование с помощью HTML¶
Самый легкий способ отключения этой функции — это использование HTML тега . Атрибут user-scalable позволяет увеличить или уменьшить масштаб на мобильном устройстве. Чтобы отключить функцию масштабирования, необходимо задать значение “no” для этого атрибута.
Как убрать авто-масштабирование сайта?
Масштабирование сайта как в Acrobat
Если в Adobe Acrobat масштабировать страницу до минимума, двигая правый нижний угол, то страница.
Как убрать масштабирование формы?
С помощью Form->ScaleBy(150,100); Делается масштаб 150%. Как вернуть обратно к 100%? Если кнопке.
Авто- масштабирование
Всем доброго времени суток. У меня такой вот вопрос: как можно сделать автомасштабирование, окон.
Как убрать масштабирование на видеокарте Ати
Всем привет! Недавно купил монитор Samsung Syncmaster S24B300 и подрубил к видеокарте MSI R6850.
Как запретить масштабирование на веб-сайте?
Чтобы запретить масштабирование, видел такой способ, сам не проверял его работоспособность.
Но согласен с мнением выше, что не нужно этого делать.
Вопрос задан более 3-ёх лет назад, может тогда не было такого способа. Смотрите и ликуйте:
Колёсиком мыши пользователи чаще всего пользуются для масштабирования. К кнопкам ctrl+ и ctrl- они обычно не прибегают. Но, если вам прям совсем совсем возможность такую нужно заблокировать, то и на эти кнопки можно поставить preventDefault, который отменяет дефолтное назначение клавиш.
Читайте также: