Как запретить масштабирование сайта html
Перейти к содержимому

Как запретить масштабирование сайта html

  • автор:

Как разрешить масштабирование на сайте?

Уважаемые друзья, меня абсолютно вымотал этот сайт. myserver1.ru/dev/anahat/new
На сайте отсутствует возможность масштабирования через зажатый контрол. То есть если зажимаю контрол и кручу колёсиком он просто скролится а не масштабируется. Я не могу понять где и КАКИМ ОБРАЗОМ отключено масштабирование. Если отключить bootstrap-grid.css то масштабирование начинает работать, но мне не нужно вырубать сетку. Нужно просто отключить настройку запрещающую масштабирование. Прошу о помощи, просто скажите что мешает именно в данном случае. Без всякой лирики.

  • Вопрос задан более трёх лет назад
  • 268 просмотров

Комментировать

Решения вопроса 2

AppFA

Frontend developer at Yandex

Скорее всего проблема кроется в JS файле plugins-scroll.js
Как-то 1 раз использовал подобный плагин, пришлось переделывать его. Там блокируется ctrl + скролл

Ответ написан более трёх лет назад

Как при изменении размеров окна браузера запретить менять масштабирование элементов

Как при изменении размеров окна браузера сделать так, чтобы та сайт вообще не менялся, т.е. та часть, которая окажется за пределами окна, просто не была видна. Например, у сайта vk.com, да и у большинства, так делается. я не о фиксированной и резиновой верстке. пример того, что я хотела https://pp.vk.me/c631422/v631422331/30b35/ee0Ehvv26_E.jpg

Отслеживать
задан 28 мая 2016 в 18:59
49 1 1 золотой знак 1 1 серебряный знак 6 6 бронзовых знаков

Если я правильно понял, просто прописывать конкретные размеры в px элементам сайта. Или вы об этом : значение fixed свойства position задаёт элементу фиксированное позиционирование.

28 мая 2016 в 19:21
я не о фиксированной и резиновой верстке.
28 мая 2016 в 19:55
кстати, у vk.com overflow: hidden;
29 мая 2016 в 8:07

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Данное поведение достигается за счет заданной минимальной ширины, с помощью свойства min-width . В случае с Яндекс это min-width: 936px; . Вот пример их CSS:

.rows

Ниже приведен полный пример требуемой вами верстки:

.container
   Example  

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores dolorum nihil explicabo, dolores iure, consequuntur voluptatem autem nesciunt aliquam officia, suscipit ullam repellendus sit. Reiciendis architecto, eveniet a quisquam nemo doloremque ullam nam consectetur eligendi repellendus. Numquam illum, minus perferendis nostrum hic ducimus expedita accusamus iste molestiae neque quo distinctio quam eligendi ex eos consequatur nihil sapiente incidunt quis nulla ab beatae atque provident est vel.

Iusto officiis iure provident dignissimos eligendi dolorem, vitae aliquid tempore eum itaque, vero deleniti qui. Delectus sequi voluptas provident magnam, hic minima maxime ab ducimus perferendis, aspernatur quis sunt minus veniam dolorum, id, tenetur officia. Quos sint dicta minima, possimus quia illum ex maiores eligendi aut doloremque suscipit non earum omnis fugiat eius eum veniam sed nesciunt ratione nulla temporibus, voluptatem, optio debitis.

Unde, odit at illo rem aliquam est libero, magni hic ipsa aut, nihil dicta, facere! Numquam officia, iusto laboriosam qui minima aliquam, necessitatibus quod, excepturi nulla accusamus optio. Quae architecto cupiditate quos animi officiis dicta sequi minus aliquam, dolorem dolore officia libero ut deserunt vitae dolor similique consequatur perspiciatis natus, commodi incidunt odit adipisci ad eveniet accusamus! Veritatis in nihil iusto numquam sunt ullam deserunt facere temporibus ex odio, sapiente iure.

Вот такой meta тег запретит мобильным устройствам масштабировать страницу:

А вот эти стили не дадут содержимому страницы сжаться меньше, чем до 1200px по ширине.

Как запретить масштабирование сайта html

Как отключить масштабирование на мобильной веб-странице с помощью HTML и CSS?

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

1. Как отключить масштабирование с помощью HTML

Самый легкий способ отключения этой функции — это использование HTML тега . Атрибут user-scalable позволяет увеличить или уменьшить масштаб на мобильном устройстве. Чтобы отключить функцию масштабирования, необходимо задать значение “no” для этого атрибута.

Как при изменении размеров окна браузера запретить менять масштабирование элементов

Как при изменении размеров окна браузера сделать так, чтобы та сайт вообще не менялся, т.е. та часть, которая окажется за пределами окна, просто не была видна. Например, у сайта vk.com, да и у большинства, так делается.

я не о фиксированной и резиновой верстке. пример того, что я хотела https://pp.vk.me/c631422/v631422331/30b35/ee0Ehvv26_E.jpg

Данное поведение достигается за счет заданной минимальной ширины, с помощью свойства min-width . В случае с Яндекс это min-width: 936px; . Вот пример их CSS:

Ниже приведен полный пример требуемой вами верстки:

Вот такой meta тег запретит мобильным устройствам масштабировать страницу:

А вот эти стили не дадут содержимому страницы сжаться меньше, чем до 1200px по ширине.

Общая ошибка заключается в том, что разработчики часто используют значение initial-scale=1 для неадптивных шаблонов. Такая установка приводит к отрисовке 100% страницы без масштабирования. Если дизайн неадаптивный, то пользователю приходится либо много прокручивать, либо вручную устанавливать масштаб, чтобы увидеть всю страницу. Самый плохой случай — сочетание Таким образом отключается возможность масштабирования на сайте. А без масштабирования нет возможности увидеть всю страницу. Если ваш шаблон не адаптивный,не отключайте масштабирование и не сбрасывайте начальный масштаб!

Ключевое слово здесь user-scalable=no

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.5.24.43458

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Трюки с сайтом на HTML и CSS

На этой странице небольшая подборка приемов, которые используют верстальщики. Это хитрости в 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.

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

Как запретить масштабирование на веб-сайте?

Чтобы запретить масштабирование, видел такой способ, сам не проверял его работоспособность.

Но согласен с мнением выше, что не нужно этого делать.

  • Facebook
  • Вконтакте
  • Twitter

Tratatuy

Webdesus

webvany

Webdesus

webvany

Вопрос задан более 3-ёх лет назад, может тогда не было такого способа. Смотрите и ликуйте:

Колёсиком мыши пользователи чаще всего пользуются для масштабирования. К кнопкам ctrl+ и ctrl- они обычно не прибегают. Но, если вам прям совсем совсем возможность такую нужно заблокировать, то и на эти кнопки можно поставить preventDefault, который отменяет дефолтное назначение клавиш.

Похожие публикации:

  1. Как сделать enter в html
  2. Как сделать базу данных для сайта html
  3. Как сделать выезжающее меню в html
  4. Как сделать заголовок в html

Размер шрифта и масштаб страниц — увеличьте размер веб-страниц

Управление масштабом позволяют увеличить или уменьшить либо размер целой веб-страницы либо просто размер всего текста в целях улучшения читабельности. Мы объясним, как это работает.

Оглавление

  • 1 Увеличение и уменьшение масштаба веб-сайта
  • 2 Изменение масштабирования пальцами
  • 3 Как изменить только размер текста
  • 4 Как установить масштаб по умолчанию для всех сайтов
  • 5 Установка минимального размера шрифта

Увеличение и уменьшение масштаба веб-сайта

Вот как вы можете увеличивать и уменьшать масштаб отдельных веб-сайтов.

  1. Щёлкните по кнопке меню Fx89menuButtonс правой стороны. Откроется меню Firefox и внизу вы увидите управление масштабом. Fx103MenuPanel
  2. Используйте кнопку + для увеличения масштаба и кнопку — для его уменьшения. Число в середине отображает текущий уровень масштабирования – щёлкните по нему, чтобы сбросить масштаб на на уровень масштабирования по умолчанию. Вы также можете видеть текущий уровень масштабирования в адресной строке:

Fx103addressBarZoomLevel

Клавиатурные сочетания: Вы также можете использовать управление масштабом без помощи мыши. Нажав и удерживая Command Ctrl , нажмите + для увеличения масштаба, — для уменьшения масштаба или 0 для его сброса.

Уровень масштабирования сохраняется для каждого домена, даже после закрытия Firefox. Например, все страницы на support.mozilla.org отображаются с одинаковыми настройками масштабирования, но он отличается от настроек масштабирования страниц на blog.mozilla.org.

Изменение масштабирования пальцами

Эта функция позволяет пользователям увеличивать и уменьшать масштаб страниц одним движением пальца, не влияя на макет страницы.

Щипковое действие в настоящее время поддерживается в Windows и Linux через сенсорный экран и высокоточные тачпады, а также на тачпадах Mac.

Как изменить только размер текста

Вместо того, чтобы изменять масштаб всей страницы, вы можете просто изменить размер текста.

  1. Нажмите на клавишу Alt для временного переключения в традиционные меню Firefox. На панели меню в верхней части экрана щёлкните Вид , затем выберите подменю Масштаб .
  2. Выберите Только текст , что заставит Firefox изменить размер текста, а не изображений.

Как установить масштаб по умолчанию для всех сайтов

Вы можете увеличить или уменьшить размер всего веб-контента следующим образом:

  1. На Панели меню в верхней части экрана нажмите Firefox и затем выберите Параметры или Настройки в зависимости от вашей версии macOS. Нажмите кнопку меню Fx89menuButtonи выберите Настройки .
  2. В панели Основные перейдите к разделу Язык и внешний вид. Fx100settings-LanguageAndAppearance
  3. Под разделом Масштаб используйте раскрывающееся меню Масштаб по умолчанию, чтобы выбрать уровень масштабирования для всех страниц. Firefox запомнит индивидуальные уровни масштабирования сайта, которые вы установили.
    • Чтобы установить уровень масштабирования только для текста, установите флажок Только текст.
  4. Закройте страницу Настройки . Любые внесённые изменения будут сохранены автоматически.

Установка минимального размера шрифта

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

  1. На Панели меню в верхней части экрана нажмите Firefox и затем выберите Параметры или Настройки в зависимости от вашей версии macOS. Нажмите кнопку меню Fx89menuButtonи выберите Настройки .
  2. В панели Основные перейдите к разделу Язык и внешний вид.
  3. В разделе Шрифты нажмите Дополнительно… . Fx100settings-FontsAdvanced
  4. В выпадающем меню Наименьший размер шрифта, выберите минимальный размер в пикселях, в котором должен отображаться весь текст.
  5. Щёлкните OK , чтобы сохранить изменения.

Для получения дополнительной информации прочитайте статью Изменение шрифтов и цветов, используемых веб-сайтами.

Эти прекрасные люди помогли написать эту статью:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *