Как изменить масштаб страницы в браузере на телефоне

Обновлено: 05.07.2024

С тех пор, как у меня появился iPhone, я стал более сговорчивым в тех местах, куда хочет пойти моя невеста. Это не потому, что мне интересно смотреть на женскую обувь, смотреть на цветы или что-то в этом роде — это потому, что мой iPhone позволяет мне все время просматривать веб-страницы. или пока крошечная батарея моего iPhone не разрядится. Только недавно я заметил, что некоторые сайты не позволяют пользователю увеличивать и уменьшать масштаб страницы. После некоторых исследований я обнаружил, что предотвратить масштабирование страницы можно так же просто, как добавить на страницу META-тег.

HTML-тег META

Это очень просто. По данным Mozilla, в мобильных браузерах обычно устанавливается размер 320 или 480. Максимальный масштаб сохраняет настройки масштаба, когда пользователь переключается с книжной на альбомную ориентацию.

Если вы хотите увидеть это в действии, возьмите свой телефон/мобильный браузер и нажмите:

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

Последние функции

Регулярные выражения для всех остальных

Создание эффектов параллакса прокрутки с помощью CSS

Невероятные демонстрации

Использование Dotter для отправки форм

MooTools Gone Wild: мигание элементов

Обсуждение

Да, это хорошо известная техника, почти каждый мобильный сайт применяет ее! Однако, если мобильной версии нет, этот тег лучше не указывать.

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

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

Но я согласен с eH? если у вас нет веских причин для блокировки размера, вы не должны этого делать!

@eH?, @Thomas: Согласен — не делайте этого, если вам *абсолютно* не нужно.

У меня возникла странная проблема, которую я не могу решить. Когда я поворачиваю свое устройство (любое, на котором я его тестирую), страница МАСШТАБИРУЕТСЯ примерно до масштаба 1,5. Даже когда я использую метатег, который вы указали выше. Я не могу масштабировать страницу (очевидно, из-за тега), но она масштабируется сама по себе при переключении с книжной на альбомную (на iPad) ИЛИ при обновлении страницы (на телефоне Android). Каждый элемент на странице имеет переменную ширину. Настройки фиксированной ширины отсутствуют. Очень странно.

<р>привет! У меня такая же проблема, когда я переключаю портрет> пейзаж> портрет. Мета начального масштаба работает неправильно. Вы исправили эту проблему? Есть метод обновления для этой мета?

Большое спасибо!

Привет! у меня такая же проблема с этим МЕТА. Когда я переключаюсь между альбомной и портретной ориентацией на iPad, область просмотра не работает. Например, если я установлю начальный масштаб, например «0,8», а затем переключусь на портрет и вернусь к ландшафту, визуализация не сработает. Изменить на «1».
Я могу это исправить? Есть ли способ обновить эту мета?

Большое спасибо!

Эй, это было здорово, Дэвид! Спасибо!

У меня возникли проблемы с отображением сайта в правильном масштабе на мобильных устройствах. Взяв за основу ваш блог, я сделал следующее:

Эй, это было здорово, Дэвид! Спасибо!

Просто нужно использовать это для сайта, который скоро появится в сети. Отлично работает!

Я думаю, что наиболее полезным аспектом этого является настройка начального масштаба. Если у меня есть контент, который я хочу отобразить с определенным оптимальным коэффициентом масштабирования (возможно, исходя из доступного разрешения) в качестве УМОЛЧАНИЮ, я могу сделать это, при этом позволяя пользователю увеличивать или уменьшать масштаб, например, а? заявил, что меня тоже раздражает, когда стандартная функциональность блокируется.

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

Спасибо за META-тег, который я применил к моему проекту, над которым я сейчас работаю, и он работает отлично
еще раз спасибо

Я попробовал вашу тестовую страницу с iPhone, старым BlackBerry и несколькими устройствами Android.
Хотя он отлично работает на iPhone и BB, Android 2.3 (стандартный браузер htc + браузер дельфина) по-прежнему мог увеличивать масштаб. Есть ли альтернатива, которая будет работать на устройствах Android?

Это не работает с приложением для iphone, использующим phonegap.
Есть идеи?

Очевидно, что эту страницу ни в коем случае нельзя масштабировать. /sarcasm Теперь, как мне настроить свой браузер, чтобы он игнорировал эту идиотскую «функцию»?

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

да, я могу o_O на своем galaxy ace

Демонстрация позволяет мне увеличить масштаб моего EVO, Android 2.3.5.

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

Мобильные игры – прекрасный пример того, где нежелательно масштабирование страницы.

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

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

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

Я бы хотел, чтобы размер моего сайта не изменялся вообще, только на уровне телефона. Как мне это сделать?

В настоящее время мои настройки….

Возможно ли это?

Если вы не фанат, почему этот пост не позволяет масштабировать?

У меня не работает.
Я использовал метатег как

но все равно уменьшается.
Я использовал длинный текст на странице, и он не переносится, а уменьшается.

Я также добавил «минимальный масштаб = 1» к приведенному выше метатегу. По-прежнему не помогает

Я использую мобильное устройство Android. Я добавил этот тег, но он не работает.

Я тоже это заметил. ХТК? Этот тег почему-то не работает с устройствами HTC. Мне пришлось либо добавить новый тег, либо просто не беспокоиться о пользователях HTC.

Как это обойти? Я хотел бы браузер, который игнорирует такие ограничения. это похоже на то, когда вы не можете перемотать вперед на DVD, устройство вполне способно, но какой-то помешанный на контроле намеренно мешает моей системе. позвольте мне делать то, что я хочу!

Любому веб-дизайнеру, запрещающему масштабирование, следует выбить зубы.

Ради всего святого*, пожалуйста, не отключайте масштабирование.

* — не говоря уже о ваших пользователях

И если кто-нибудь знает, как позволить мне просматривать контент так, как я (и мои стареющие глаза) хочу, поделитесь им со всем миром.

<р>1. Создайте закладку, назвав ее, например, «+Zoom»
2. Отредактируйте закладку, чтобы изменить URL-адрес на
javascript:document.querySelector('meta[name=viewport]').setAttribute('content','width=device-width,initial-scale=1.0,maximum-scale = 10,0, масштабируемый пользователем = 1 ');
3. Когда вы столкнетесь с оскорбительной страницей, «Откройте» закладку +Zoom и вуаля!

Спасибо вам, люди, которые намного умнее и прилежнее меня!

Уважаемый Дэвид,
Спасибо за ваше предложение, но у меня есть одно неудобство при использовании этого тега.
Я не говорю по-английски и постараюсь объяснить свою проблему как можно лучше.

Я разрабатываю свой первый адаптивный веб-сайт с помощью CSS. До сих пор дела идут медленно, но хорошо.

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

Моя основная проблема заключается в следующем:

Тестовая страница загружается правильно, и когда я поворачиваю телефон, внутренние элементы страницы адаптируются к новой ширине.
Это хорошо, НО……… когда я масштабирую страницу (двойной щелчок по экрану), страница масштабируется, и браузер снова сужает внутренние элементы до новой, более узкой ширины,
и я не хотите, чтобы страница была отзывчивой при увеличении.
Я хочу, чтобы элементы увеличивались только при увеличении страницы.
Я правильно объясняю?
Моя страница кажется очень отзывчивой. :) в том числе, когда я увеличиваю масштаб!

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

Но помните, я не говорю об iPad или iPhone или других более современных смартфонах или планшетах.
Я провожу первые тесты на Nokia 5800 с Symbian, но думаю, что эту проблему масштабирования тоже можно решить, в том числе и на этом Symbian-смартфоне.

Есть ли какой-нибудь способ в CSS или HTML, чтобы избежать этого эффекта отклика при увеличении, особенно при разрешении 320 или 400 пикселей.
И….
Можно ли использовать два тега окна просмотра? Например:

У вас есть предложения?

Надеюсь, я ясно объяснил эту проблему, чтобы кто-то мог мне помочь.
Спасибо!

Просмотр на мобильных устройствах иногда может быть затруднен из-за мелкого текста и изображений. Особенно сайты, которые ограничивают функцию масштабирования, затрудняют просмотр пользователями. Итак, Chrome предлагает вам включить опцию принудительного масштабирования, чтобы переопределить настройки таких сайтов. Для этого перейдите к трем точкам в углу браузера Chrome и нажмите «Настройки». Откройте вкладку «Специальные возможности» и коснитесь, чтобы установить флажок «Включить принудительное масштабирование».

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

Например: когда вы запускаете веб-сайт Facebook в браузере Chrome вместо родного приложения. Facebook ограничивает масштабирование экрана, что затрудняет четкий просмотр текста или изображений.

Это происходит и на мобильном сайте Twitter. Я сталкивался с этой проблемой всякий раз, когда я входил в Twitter в своем браузере Chrome. Это чрезвычайно затрудняло чтение и просмотр.

Чтобы обойти ограничение на масштабирование веб-сайта, мы можем включить масштабирование в Chrome Android. Вы можете просто коснуться, чтобы увеличить масштаб на любом веб-сайте в Chrome после включения функции принудительного масштабирования.

Как включить принудительное масштабирование в Chrome Android?

Функция принудительного масштабирования Chrome для Android обычно переопределяет настройки веб-сайта, чтобы заблокировать масштабирование. Следовательно, он позволяет масштабировать или увеличивать экран на каждом мобильном сайте.

Вот как включить принудительное масштабирование в Chrome Android:

Вот и все. Теперь вам будет разрешено использовать масштабирование Chrome Android на веб-сайтах, которые ранее не позволяли масштабировать Chrome Android.

Видео о принудительном масштабировании в Chrome Android

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

Надеюсь, вам понравилось видео. Не забудьте подписаться на наш канал Youtube.

Итог: Chrome Android Force Zoom

Принудительное масштабирование — довольно полезная и доступная функция, доступная в Chrome Android. Особенно для людей с нарушениями зрения или людей, которым трудно читать мелкий текст.

После того, как я начал использовать Zoom Chrome для Android, я мог без проблем просматривать Twitter в браузере. Теперь это не напрягает мои глаза и делает весь процесс чтения очень легким и удобным.

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

Аналогичным образом вы также можете увеличивать или уменьшать масштаб в браузере Chrome, используя встроенную функцию. Вы также можете использовать сочетание клавиш в Google Chrome для компьютера.

Нравится ли вам функция масштабирования Chrome Android на вашем смартфоне? Почему вы используете принудительное масштабирование на своем мобильном телефоне?

Как включить Force Zoom для мобильного сайта в Chrome Android?

Если вы хотите включить Force Zoom для мобильных сайтов в Chrome Android, вам нужно просто нажать на три точки в углу. Теперь нажмите на настройки, нажмите на Специальные возможности и установите флажок Включить принудительное масштабирование.

Как я могу увеличить сайты в Chrome, если на сайте ограничена функция увеличения?

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

Можно ли масштабировать мобильные сайты, на которых функция масштабирования ограничена?

Да, параметр «Включить принудительное масштабирование» в Chrome Android поможет вам масштабировать сайты, функции масштабирования которых ограничены.

Наконец, вот рекомендуемые веб-браузеры для вашего компьютера и мобильного телефона, которые вы должны попробовать.

< /tr>

Windows	MacOS	iOS	Android	Linux
Chrome Windows	Chrome Mac	Chrome iOS	Chrome Android	Firefox Linux
Firefox Windows	Safari Mac	Safari iOS	Edge Android	Chrome Linux< /td>
Edge Windows	Firefox Mac	Edge iOS	Samsung Internet	Edge Linux

Если у вас есть какие-либо мысли о том, как включить принудительное масштабирование для мобильного сайта в Chrome Android?, не стесняйтесь оставлять комментарии ниже. Если вы считаете эту статью полезной, поделитесь ею со своей сетью.

Кроме того, подпишитесь на наш канал BrowserHow на YouTube, чтобы получать полезные обучающие видео.

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

Откройте приложение "Настройки".
Выберите вариант Safari.
Прокрутите вниз и выберите параметр "Масштаб страницы".
Нажмите на нужный процент увеличения.

Когда вы посещаете веб-страницы в браузере Safari на iPhone, возможно, вам будет сложно их читать.

Вне зависимости от того, кажется ли информация на страницах большой или слишком маленькой, это может повлиять на вашу способность просматривать Интернет.

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

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

Как увеличить или уменьшить масштаб страницы в браузере Safari для iPhone

Действия, описанные в этом руководстве, были выполнены на iPhone 11 с iOS 13.3.1. Обратите внимание, что это не повлияет на настройки масштабирования для других браузеров, которые могут быть установлены на вашем устройстве, таких как Chrome или Firefox.

Шаг 1. Коснитесь значка настроек.

Шаг 2. Прокрутите вниз и выберите Safari.

Шаг 3. Прокрутите меню до раздела «Настройки веб-сайтов» и выберите «Масштаб страницы».

Шаг 4. Выберите нужный уровень масштабирования.

Узнайте, как изменить настройку масштабирования дисплея на iPhone, если вы также хотите увеличивать или уменьшать масштаб в других местах на iPhone.

Мэттью Берли пишет учебные пособия по технологиям с 2008 года. Его тексты появились на десятках различных веб-сайтов и были прочитаны более 50 миллионов раз.

После получения степени бакалавра и магистра компьютерных наук он несколько лет работал в сфере управления ИТ для малого бизнеса. Однако теперь он работает полный рабочий день, создавая онлайн-контент и веб-сайты.

Его основные темы написания включают iPhone, Microsoft Office, Google Apps, Android и Photoshop, но он также писал на многие другие технические темы.

Ответы на наиболее распространенные вопросы можно найти в базе знаний ITS!

Если вам нужно изменить размер содержимого веб-сайта, используйте функцию МАСШТАБИРОВАНИЯ в Google Chrome, чтобы уменьшить или увеличить текст и изображения.

Есть 2 способа настроить параметры масштабирования: постоянно установить уровень масштабирования для всех страниц, открываемых в Chrome (полезно при использовании дисплеев с высоким разрешением), или настроить параметры масштабирования вручную в каждом конкретном случае.

По умолчанию Chrome устанавливает масштаб на 100 %. Чтобы настроить параметры вручную, используйте клавишу Ctrl и комбинации «+» или «-», чтобы увеличить или уменьшить масштаб страницы. Если вы используете мышь, вы можете удерживать клавишу Ctrl на клавиатуре и использовать колесико мыши для увеличения или уменьшения масштаба.

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

Чтобы настроить уровень увеличения по умолчанию, чтобы все страницы открывались с определенным уровнем масштабирования, нажмите три горизонтальные линии в правом верхнем углу Chrome и выберите настройки вариант.

На странице настроек нажмите ссылку Показать дополнительные настройки… в нижней части страницы. Это отобразит некоторые дополнительные настройки, которые вы можете настроить.

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

Выберите нужный вариант и закройте вкладку "Настройки". Ваш выбор будет запомнен.

Читайте также: