Почему на планшете картинка не на весь экран

Обновлено: 07.07.2024

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

Режим чтения

 — это режим просмотра страницы, при котором на экране отображаются только текст и картинки (видео) к нему. Остальные элементы страницы (баннеры, элементы управления сайтом или кнопки социальных сетей) будут скрыты.

Перейти в режим чтения

Нажмите в Умной строке значок .

Ограничение. Если в меню нет строки Режим чтения , а в Умной строке — значка, режим чтения нельзя включить для этой страницы.

Нажмите в Умной строке значок .

Перенос текста

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

В разделе Масштаб и перенос текста включите опцию Переносить текст по словам .

Масштаб текста

Вы можете сделать шрифт на странице крупнее или мельче:

В разделе Масштаб и перенос текста задайте удобный масштаб с помощью ползунка.

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

Примечание. Некоторые сайты запрещают браузерам менять масштаб текста. Чтобы снять этот запрет, в разделе Масштаб и перенос текста включите опцию  Игнорировать запросы сайтов на запрет масштабирования .

Полная версия сайта

По умолчанию в браузере отображаются мобильные версии сайтов. Чтобы открыть полную версию:

Нажмите  → Версия для ПК .

Чтобы вернуться к мобильной версии, нажмите   → Мобильная версия сайта .

Если вы не нашли информацию в Справке или у вас возникает проблема в работе Яндекс.Браузера, опишите все свои действия по шагам. По возможности сделайте скриншот. Это поможет специалистам службы поддержки быстрее разобраться в ситуации.

Примечание. Для решения проблем в работе сервисов Яндекса обращайтесь в службу поддержки этих сервисов: О проблемах Яндекс.Браузера на компьютере пишите прямо из браузера:  → Дополнительно  → Сообщить о проблеме или через форму. О проблемах в работе приложения Яндекс — с Алисой пишите через форму. Если вопрос касается главной страницы Яндекса (изменить тему оформления, настроить блоки главной страницы или иконки сервисов, найти Яндекс.Деньги и т. д.), пишите через форму. Выберите опцию Вопрос о главной странице Яндекса . По вопросам работы Почты (отключить рекламу, настроить сбор писем с других ящиков, восстановить удаленные письма, найти письма, попавшие в спам и т. д.) пишите через форму. По вопросам работы Поиска и выдачи (ранжирование сайта в результатах поиска, некорректные результаты поиска и т. д.) пишите через форму. ","prev_next":<"prevItem":<"disabled":false,"title":"Переводчик","link":"/support/browser-mobile-android-tablet/navigation/translation.html">,"nextItem":>,"breadcrumbs":[,],"useful_links":null,"meta":,"voter":","extra_meta":[>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>],"title":"Удобное чтение страниц - Яндекс.Браузер для планшетов с Android. Справка","productName":"Яндекс.Браузер для планшетов с Android","extra_js":[[,"mods":,"__func137":true,"tag":"script","bem":false,"attrs":,"__func67":true>],[,"mods":,"__func137":true,"tag":"script","bem":false,"attrs":,"__func67":true>],[,"mods":,"__func137":true,"tag":"script","bem":false,"attrs":,"__func67":true>]],"extra_css":[[],[,"mods":,"__func69":true,"__func68":true,"bem":false,"tag":"link","attrs":>],[,"mods":,"__func69":true,"__func68":true,"bem":false,"tag":"link","attrs":>]],"csp":<"script-src":[]>,"lang":"ru">>>'>

Режим чтения

Перейти в режим чтения

Нажмите в Умной строке значок .

Ограничение. Если в меню нет строки Режим чтения , а в Умной строке — значка, режим чтения нельзя включить для этой страницы.

Нажмите в Умной строке значок .

Перенос текста

Нажмите → Настройки . В разделе Масштаб и перенос текста включите опцию Переносить текст по словам .

Масштаб текста

Вы можете сделать шрифт на странице крупнее или мельче:

Нажмите → Настройки . В разделе Масштаб и перенос текста задайте удобный масштаб с помощью ползунка.

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

Примечание. Некоторые сайты запрещают браузерам менять масштаб текста. Чтобы снять этот запрет, в разделе Масштаб и перенос текста включите опцию Игнорировать запросы сайтов на запрет масштабирования .

Полная версия сайта

По умолчанию в браузере отображаются мобильные версии сайтов. Чтобы открыть полную версию:

Нажмите → Версия для ПК .

Чтобы вернуться к мобильной версии, нажмите → Мобильная версия сайта .

Примечание. Для решения проблем в работе сервисов Яндекса обращайтесь в службу поддержки этих сервисов:

О проблемах Яндекс.Браузера на компьютере пишите прямо из браузера: → Дополнительно → Сообщить о проблеме или через форму.

Масштаб интерфейса на устройстве Андроид – это размер всех элементов меню. Благодаря возможности его настроек, можно легко отрегулировать все под максимально удобный вид. Изменять масштаб можно, начиная с версии ОС Android 7.0 Nougat. Но на устройствах некоторых производителей, имеющих свою фирменную оболочку, функция уменьшения или увеличения масштаба присутствует уже давно. Они внедрили её еще на более ранних версиях Андроид.

Из статьи вы узнаете

Зачем менять масштаб?

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

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

В качестве примера посмотрите на эти два скриншота. На одном масштаб маленький, а на другом большой:

На что влияет масштаб?

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

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

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

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

Масштаб будет применен к следующим частям системы:

Меню системных настроек;
Приложения, не имеющие особого дизайна (некоторые мессенджеры, настройщики и так далее);
Статус бар и шторка уведомлений;
Приложение для звонков и СМС;
Календарь, почта, переводчик и прочие сервисы от Google и других компаний;
Play Market (или Google Play);
Экран разблокировки;
Размер диалоговых окон и иконок в лаунчере.

А вот эти элементы не будут изменяться:

Отдаленность заставки;
Отдаленность фоновых изображений и живых обоев;
Странички в браузере и прочие веб-элементы;
Игры;
Видео и музыкальные плееры;
Картинки в галереях;
Интерфейс входящего и исходящего вызовов;
Шрифт, то есть любой текст;
Клавиатура;
И так далее…

Первый способ

Для начала нам нужно зайти в настройки смартфона. Для этого нажмите на шестерёнку в шторке уведомлений либо запустите ярлык настроек через лаунчер.
Далее в настройках откройте пункт «Экран».

В данном случае доступно лишь 4 режима:

очень крупный;
средний;
маленький;
очень маленький.

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

Второй способ

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

Для применения нужно зайти в режим «Для разработчиков». Делаем следующие шаги:

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

Большинство смартфонов под управлением ОС Android позволяют настраивать интерфейс под себя, регулируя размер шрифта. Но стандартный набор обычно невелик и ограничивается некими вариантами наподобие «маленький», «средний» и «большой». Часто этого мало, потому что на минимальном значении все слишком мелкое, на максимальном – чересчур крупное.

Изменить масштаб на Андроиде, начиная с версии Android 7 Nougat, можно с помощью настроек для разработчиков. Открыть их можно, зайдя в пункт параметров «О телефоне» и быстро тапнув несколько раз подряд по пункту «Номер сборки» (чистый Андроид) или «Версия MIUI» (смартфоны Xiaomi). После этого найдите в меню настроек пункт «Для разработчиков».

Разблокировка скрытых функций изменения размера GUI Разблокировка скрытых функций изменения размера GUI

На Android 7 нужный раздел находится прямо в главном меню настроек. На версиях 8 и новее – в подменю «Система», а на MIUI – в разделе «Расширенные настройки».

Как увеличить или уменьшить масштаб на Андроиде

Для изменения масштаба интерфейса ОС Android перейдите в меню настроек для разработчиков. Найдите там подгруппу «Отрисовка». Именно в числе этих пунктов и будет параметр «Минимальная ширина», отвечающий за изменение масштаба системного интерфейса Андроида.

Прописывая значение параметра, отличное от штатного, вы можете изменять размер пиктограмм, кнопок, шрифтов и других элементов GUI, в зависимости от потребностей. При уменьшении значения DPI происходит увеличение всех элементов на экране, так как система «думает», что у вас больше устройство. Минимальное значение этого пункта составляет 320 DPI (точек на дюйм).

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

Недостатком описанного метода изменения масштаба на Андроиде является совместимость с ограниченным кругом устройств. Он недоступен на аппаратах с прошивками старше Android 6, но может отсутствовать и на некоторых смартфонах с более новой версией ОС Андроид.

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

Альтернативный способ

Есть еще один способ изменить масштаб в ОС Android, который не требует использования настроек для разработчика, но обладает меньшей гибкостью. Для того, чтобы увеличить или уменьшить шрифт, найдите подменю «Специальные возможности». В чистом Андроиде он расположен в главном меню, в MIUI – в подменю «Расширенные настройки».

Найдите пункт «Масштаб изображения на экране» и в открывшемся меню используйте кнопки «+» и «-» для смены размера элементов интерфейса. Он меняется сразу, на экране наглядно демонстрируется размер шрифта. Однако эта регулировка не столь плавная, как в параметрах разработчика, и не позволяет менять показатель DPI плавно.

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

Взялся за верстку своего первого адаптивного сайта. Все шло хорошо: размеры блоков в процентах, использование медиа-запросов и т.д. При экспериментировании с размером браузера все растягивается, сжимается, перестраивается как надо. Загрузил сайт на сервер, зашел со своего смартфона (android) и столкнулся с проблемой. Но тема даже не об этой проблеме, а о другой, которую породило решение первой. Об этом ниже…

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

И на хабре уже упоминалось решение этой проблемы, и нагуглить не составляет труда. Используем мета тег viewport

Но радость моя была не долгой. До тех пор пока я не открыл эту страничку на планшете. Ширина экрана моего самсунга в горизонтальной ориентации (а проблема возникла именно в просмотре в горизонтальной ориентации) 1280 пикс.

Что же в итоге получилось. Сайт, максимальная ширина которого, напомню 900 пикс, отобразился в своем нормальной размере в 100% масштабе. Но размер экрана устройства 1280 пикс! И что в итоге получлось? А получилось, что сайт не занял всю ширину экрана, а занял свои законные 900 пикс. В итоге по краям остались поля примерно по 154 пикс ((1280-900)/2). Кто-то скажет, что это ж нормально. Ведь когда мы открываем сайт на ПК, с шириной экрана, скажем, те же 1280 точек, то естественно сайт не будет занимать всю ширину, а будет занимать положенные ему 900 пикс, которые заданы в CSS как максимальная ширина сайта (или фиксированная ширина, если это фиксированный макет).

Но на планшете то эта ситуация не кажется нормальной. Т.к. экран сам по себе все-таки маленький, по сравнению с десктопами, хоть разрешение у него и 1280 точек. Хотелось бы, чтобы сайт занимал максимум пространства этого экрана. На компе нам этого не нужно, т.к. 900 пикс на мониторе будут выглядеть нормально, благо размер пиксела у него побольше чем у планшета. А вот на планшете когда страница не занимает весь экран – это кажется дикостью (по крайней мере мне). И все дело в том самом мета-теге viewport, которым мы задали отображение сайта в реальном масштабе. Это помогало нам, когда размер сайта был меньше 900 точек, т.е. помогало нам не масштабировать его под размер экрана, а отображать в реальном размере. Но это мешает нам при размере экрана больше 900 точек, ведь тут как раз хочется, чтобы масштабирование сработало, чтобы сайт увеличился до размеров окна, т.е. по максимум использовал всю ширину экрана, ведь это ж все-таки мобильное устройство.

Я для сравнения загрузил старую версию этого сайта (дизайн полностью такой же, за тем исключением, что не адаптивный, а фиксированной ширины 900 пикс) и он при первоначальной загрузке занял всю ширину экрана. Ведь в нем я не использовал viewport.

В заключение хочу сказать, что тестировал пока только на самсунге. Боюсь предположить, что же будет на iPad, разрешение которого по широкой стороне в два раза больше самсунга, 2048 пикс. Неужели страница будет занимать меньше половины экрана (она ж 900 точек)?

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

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

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