0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Адаптация сайта на мобильных устройствах

Адаптация сайта на мобильных устройствах

Для просмотра на мобильных устройствах, используется метатег viewport. Он сообщает браузеру, каким образом нужно контролировать отображение сайта на мобильных устройствах (к ним так же относятся и планшетные компьютеры).

Этот метатег вставляют в контейнер head вашего сайта.

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

Для более детальной настройки отображения используем дополнительные значения

Bookmarklet

Оригинальный код находится в кофе:

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

Если вам нужна действительно пуленепробиваемое решение для ширины и высоты документа ( pageWidth и pageHeight на картинке), вы можете захотеть использовать мой плагин jQuery.documentSize.

У него есть только одна цель: всегда возвращать правильный размер документа даже в сценариях, когда jQuery и другие методы fail. Несмотря на свое название, вам необязательно использовать jQuery — он написан в ванильном Javascript и работает без jQuery.

для глобального document . Для других документов, например. во встроенный iframe, к которому у вас есть доступ, передать документ в качестве параметра:

Обновление: теперь для размеров окна тоже

Начиная с версии 1.1.0, jQuery.documentSize также обрабатывает размеры окна.

Это необходимо, потому что

  • $( window ).height() багги в iOS, с точки зрения бесполезности
  • $( window ).width() и $( window ).height() являются ненадежны на мобильных устройствах, поскольку они не ‘t обрабатывать эффекты мобильного масштабирования.

jQuery.documentSize предоставляет $.windowWidth() и $.windowHeight() , которые решают эти проблемы. Для получения дополнительной информации, пожалуйста, ознакомьтесь с документация.

В некоторых случаях, связанных с отзывчивым макетом $(document).height() , можно возвращать неверные данные, отображающие только высоту порта просмотра. Например, когда какая-то оболочка div # имеет высоту: 100%, этот #wrapper может быть растянут каким-то блоком внутри него. Но высота по-прежнему будет напоминать высоту видового экрана. В такой ситуации вы можете использовать

Это представляет фактический размер обертки.

Я разработал библиотеку, чтобы узнать реальный размер видового экрана для настольных компьютеров и мобильных браузеров, поскольку размеры видовых экранов являются несогласованными на всех устройствах и не могут полагаться на все ответы этого сообщения (в соответствии со всеми исследованиями, которые я сделал об этом): https://github.com/pyrsmk/W

Иногда вам нужно увидеть изменения ширины и высоты при изменении размера окна и внутреннего содержимого.

Для этого я написал небольшую script, которая добавляет окно журнала, которое динамически контролирует все изменения размера и почти мгновенно обновляет.

Он добавляет допустимый HTML с фиксированной позицией и высоким z-индексом, но достаточно мал, поэтому вы можете:

  • используйте его на фактическом сайте
  • используйте его для тестирования мобильного/отзывчивого просмотры

Протестировано: Chrome 40, IE11, но очень возможно работать и с другими/более старыми браузерами. )

EDIT: Теперь стили применяются только к элементу таблицы журналов — не ко всем таблицам — также это решение без jQuery🙂

Вы можете использовать объект Screen, чтобы получить это.

Ниже приведен пример того, что он будет возвращать:

Чтобы получить переменную screenWidth , просто используйте screen.width , то же самое с screenHeight , вы просто используете screen.height .

Чтобы получить ширину и высоту окна, это будет screen.availWidth или screen.availHeight соответственно.

Для переменных pageX и pageY используйте window.screenX or Y . Обратите внимание, что это от ОЧЕНЬ ЛЕВЫЙ/ТОП ВАШЕГО ВЛЕВО /TOP -est SCREEN. Поэтому, если у вас есть два экрана ширины 1920 , тогда окно 500px слева от правого экрана будет иметь значение X 2420 (1920 + 500). screen.width/height , однако, отобразите ширину или высоту экрана CURRENT.

Чтобы получить ширину и высоту вашей страницы, используйте jQuery $(window).height() или $(window).width() .

Снова используя jQuery, используйте $(«html»).offset().top и $(«html»).offset().left для ваших значений pageX и pageY .

Добавление meta viewport к веб-странице

Метатег viewport, как уже было отмечено выше, в большой степени предназначен для адаптивной разметки. Поэтому начнём рассмотрение именно с неё.

Настройка meta viewport для адаптивных веб-страниц

Включение поддержки тега meta viewport для адаптивных сайтов осуществляется посредством добавления всего одной строчки в раздел head веб-страницы:

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

Контент (содержимое) этих сведений указывается в качестве значения атрибута content посредством пар ключ-значение, разделённых между собой запятыми.

Для адаптивного дизайна значения атрибута content viewport должно определяться 2 параметрами:

  • width=device-width
  • initial-scale=1
Читать еще:  Помехи в скайпе при разговоре

Рассмотрим каждый из них более подробно.

Первый параметр ( width=device-width ) отвечает за то, чтобы ширина видимой области веб-страницы равнялась CSS ширине устройству ( device-width ). Данная ширина (CSS) — это не физическое разрешение экрана. Это некоторая величина независящая от разрешения экрана. Она предназначена для того, чтобы мобильный адаптивный дизайн сайта отображался на всех устройствах одинаково независимо от их плотности пикселей экрана.

Например, смартфон iPhone4 с физическим разрешением 640×960 имеет CSS разрешение 320×480. Это означает то, что сайт с метатегом viewport ( width=device-width ) на этом устройстве будет выглядить так как будто бы это устройство имеет разрешение 320×480 (в данном случае вместо device-width будет подставляться значение 320px). Т.е. на один CSS пиксель будет приходиться 4 физических пикселя (2 по горизонтали и 2 по вертикали).

CSS разрешение смартфона iPhone4

Как же определить какое CSS разрешение будет иметь тот или иной экран устройства?

Определяется оно в зависимости от того какую экран имеет плотность пикселей. Если экран имеет плотность меньше 200ppi, то CSS-разрешение будет равно физическому. Если экран имеет плотность пикселей от 200 до 300 (ppi), то CSS-разрешение будет в 1.5 раза меньше физического. А если экран имеет плотность более 300ppi, то CSS разрешение будет определяться делением физического разрешения на некоторый коэффициент. Данный коэффициент определяется по формуле плотность/150ppi с округлением обычно до 2, 2.5, 3, 3.5, 4 и т.д.

Плотность пикселей экранаCSS коэффициент
меньше 200ppi1
200 — 300 ppi1.5
больше 300ppiплотность/150 (с округлением до 2, 2.5, 3, 3.5, 4 и т.д.)

Рассмотрим несколько примеров:

  • Apple iPhone 3: физическое разрешение 320×480, плотность пикселей — 163ppi. Плотность пикселей меньше 200, следовательно, CSS коэффициент равен 1. CSS разрешение будет равно физическому, т.е. 320×480.
  • Apple iPhone 6: физическое разрешение 750×1344, плотность пикселей — 326ppi. Плотность пикселей больше 300, следовательно, CSS коэффициент будет равен 326/150=2 (2.2 округляем до 2). CSS разрешение будет равно 375×667.
  • LG G4: физическое разрешение 1440×2560, плотность пикселей — 538ppi. Плотность пикселей больше 300, следовательно, CSS коэффициент будет равен 538/150=4 (3.6 округляем до 4). CSS разрешение будет равно 360×640.
  • Galaxy S3 mini: физическое разрешение 480×800, плотность пикселей — 233ppi. Плотность пикселей больше 200, следовательно, CSS коэффициент будет равен 1.5. CSS разрешение будет равно 320×533.
  • Galaxy S5: физическое разрешение 1080×1920, плотность пикселей — 441ppi. Плотность пикселей больше 300, следовательно, CSS коэффициент будет равен 441/150=3. CSS разрешение будет равно 360×640.

Второй параметр initial-scale — устанавливает первоначальный масштаб веб-страницы. Значение 1 означает то, что масштаб равен 100%.

meta viewport и не адаптивные страницы

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

Например, можно сделать так чтобы ширина страницы масштабировалась под ширину устройства (если ширина макета больше CSS ширины). Но учтите, что масштабирование работает только в разумных пределах.

Осуществляется это тоже с помощью установления параметру width значения device-width . Т.е. для не адаптивных сайтов в раздел head необходимо добавить следующую строчку:

Масштабирование неадаптивного дизайна под размер устройства (смартфона)

Кроме того, разработчики браузеров позаботились даже о тех, кому трудно добавить эту строчку. В этом случае экран устройства будет по умолчанию иметь CSS ширину, равную 980px. Это позволит отобразить без прокрутки (по ширине) большинство десктопных макетов сайтов.

Ширина по умолчанию viewport в браузере (если meta viewport не указан)

Если же необходимо фиксированный сайт отобразить в браузере мобильного устройства в обычном масштабе (не уменьшенном), то необходимо использовать следующий вид метатега viewport:

Дополнительные параметры meta viewport

Кроме основных параметров, тег meta viewport содержит много других.

Вот некоторые из них:

  • minimal-scale — задаёт минимальный масштаб;
  • maximal-scale — устанавливает максимальный масштаб;
  • user-scalable — указывает, может ли пользователь управлять масштабом или нет.

Примеры viewport с использованием дополнительных параметров:

На телефоне

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

В браузере есть две функции, как отдалить и приблизить:

  • использовать жесты: свайп на сжатие;
  • указать параметр: Специальные возможности.

В первом случае, у пользователя получится только приблизить: зайти в Одноклассники через браузер и сделать свайп на сжатие.

Чтобы изменить размеры во вкладке:

  1. Зайти в Google Chrome (мобильная версия).
  2. Нажать: «Настройки» – Специальные возможности.
  3. Масштабирование текста и «Принудительно изменять масштаб».

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

Включить принудительное увеличение в Chrome на Android

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

В раскрывающемся меню нажмите «Настройки».

В меню «Настройки» прокрутите вниз и коснитесь «Специальные возможности», чтобы войти в меню специальных возможностей Chrome.

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

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

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

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

Yandex

По желанию можно изменить масштаб всех или только одной страницы. Рассмотрим каждый из вариантов.

Чтобы изменить масштабирование для всех страниц, сделайте следующее:

  • Жмите на значок с тремя полосками (настройки).

  • Войдите в раздел «Сайты».
  • Найдите блок «Масштаб страниц» и выберите из выпадающего перечня необходимое значение.

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

  • жмите на значок настроек;
  • в появившемся меню можно изменить масштаб с помощью кнопок «плюс», «минус», а также «развернуть во весь экран».

Изменение масштабирования доступно с помощью горячих кнопок. К примеру, зажатие Ctrl и «+» позволяет увеличить его, а Ctrl и «-» — уменьшить. Альтернативный вариант — использование жестов, но для этого нужно заблаговременно внести необходимые настройки.

Информация о внесенных изменениях хранится в программе, поэтому при очередном входе на страницу внесенные данные будут сохранены.

Microsoft Edge

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

С помощью настроек:

  • нажмите на 3 точки сверху справа;
  • выберите увеличение или уменьшение масштаба.

При необходимости используете комбинацию горячих клавиш. Здесь срабатывание Ctrl и «+» позволяет изменить данные — увеличить масштаб, а Ctrl и «-» — уменьшить.

Internet Explorer

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

  1. Для IE 8 перейдите в раздел Сервис, а после войдите в раздел изменения масштабирования. Там выберите необходимое значение, нажав пункт Особый, после чего установите подходящий параметр. При желании можно просто изменить размер текста. Для этого достаточно зажать кнопку Alt до появления меню, а после выбрать Вид и Размер шрифта.
  2. IE 9. Найдите снизу экрана стрелку возле кнопки изменения масштаба. Выберите необходимый параметр после нажатия ссылки Особый и указания информации. Альтернативное решение — изменить размер текста. В этом случае кликните на кнопку Страница и выберите Размер шрифта (укажите интересующий параметр).

Google Chrome

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

Стандартный способ через меню:

  1. Запустите программу на ПК.
  2. Справа вверху жмите на значок настройки и управления (три точки).
  3. Войдите в строчку Масштаба и выберите нужный размер (для увеличения и уменьшения жмите на плюс и минус соответственно, а для полноэкранного режима — на кнопку с квадратным окошком.

Для ускорения работы можно воспользоваться комбинацией горячих кнопок. Здесь нажатие Ctrl и «+» позволяет увеличить размер, а Ctrl и «-» — уменьшить.

Для удобства можно использовать настройки браузера для всех страниц одновременно (для видеофайлов, картинок и текста). Алгоритм такой:

  • войдите в программу;
  • справа вверху жмите на три точки (настройки);

  • войдите в раздел Внешний вид;
  • выберите нужный вариант — изменение размера всего контента (Мастштабирование страницы) или текстовой информации (Настройка шрифта).

Mozilla Firefox

Не менее популярный вопрос — как увеличить масштаб окна браузера или текста в Мозилла Фаерфокс. Цель таких действий — улучшение общей читабельности.

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

  • кликните по значку с тремя полосками справа вверху;
  • найдите внизу кнопку управления масштабом;
  • жмите на «плюс» или «минус» для установки необходимого параметра;

Как вариант, можно использовать горячие кнопки Ctrl и «+» и Ctrl и «-». Для установки нужного масштабирования для всех страниц одновременно можно использовать приложение Fixed Zoom или, как вариант, Zoom Page We.

Для изменения размера текста:

  • жмите на Alt;
  • найдите в меню раздел Вид;
  • войдите по ссылке Масштаб;
  • выберите Только текст.

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

Для уменьшения минимального размера:

  • жмите на значок с тремя полосками;
  • выберите Настройки;
  • войдите в раздел Содержимое;
  • опуститесь вниз к разделу Язык и внешний вид;
  • в секции Шрифты и цвета жмите по кнопке Дополнительно;
  • выберите минимальный размер в пикселях;
  • сохраните настройки.

Opera

Теперь рассмотрим, как в браузере менять размер сайта или текста для веб-проводника Опера. Пользователи Windows могут сделать такие шаги:

  • войдите в меню Оперы;
  • перейдите в Zoom и жмите кнопку «плюс» или «минус».

Чтобы изменить параметр, можно использовать горячие кнопки Ctrl и «+» или Ctrl и «-».

Для дальнейшего удобства можно установить масштабирование по умолчанию. Для этого:

  • войдите в Настройки;

  • жмите на Основные;
  • в разделе Оформление найдите Page Zoom;
  • выберите подходящий вариант.

После внесения правок все открываемые страницы будут показываться в необходимом размере. Если уже были открыты какие-то сайты, их нужно перезагрузить.

Safari

При желании в браузере Сафари можно изменить масштабирование одной или сразу всех страниц.

В первом случае сделайте такие шаги:

  • перейдите в Вид;
  • жмите Увеличить (плюс) или используйте мышку, если имеется поддержка текста.

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

Для изменить масштабирование по всем страницам, сделайте такие шаги:

  • войдите в меню Сафари;
  • перейдите в Настройки;
  • зайдите в раздел Дополнения;
  • поставьте отметку возле «Размер шрифта всегда не менее»;
  • выберите подходящую цифру.

После выполнения этих действия шрифт будет изменен для всех страниц браузера.

Настраиваем размеры картинок

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

Мы для каж­дой кар­тин­ки доба­ви­ли опи­са­ние раз­ме­ров бло­ка для каж­до­го раз­ме­ра экра­на и раз­бе­рём его на при­ме­ре пер­вой кар­тин­ки. Теперь, если экран очень малень­кий ( col ) или про­сто малень­кий ( col-sm ), то пер­вый блок с коти­ком зай­мёт все 12 яче­ек, то есть всю шири­ну. Если экран сред­не­го раз­ме­ра ( col-md ) — то 4 ячей­ки, а если боль­шой ( col-lg ) или очень боль­шой ( col-xl ) — то пусть кот зани­ма­ет по 2 ячей­ки.

Для вто­рой кар­тин­ки дей­ству­ют те же самые пра­ви­ла, но раз­мер кота на боль­ших и очень боль­ших экра­нах дру­гой — 8 яче­ек. Тре­тья кар­тин­ка настра­и­ва­ет­ся точ­но так же, как и пер­вая. Обра­ти­те вни­ма­ние: что­бы на сред­них экра­нах полу­чить оди­на­ко­вый раз­мер кар­ти­нок, мы в опи­са­ние каж­дой из них доба­ви­ли одну и ту же коман­ду col-md-4, кото­рая каж­до­му коту даёт 4 колон­ки, что­бы все были одно­го раз­ме­ра.

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

Как изменять масштаб на компьютере

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

На одной странице

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

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

Как видите, при приближении страницы в верхнем правом углу появляется окно, в котором указывается масштаб страницы. В моем случае размер увеличен на 25%.

Максимально же страницу можно увеличить на 400%. Для отмены приближения просто нажмите на кнопку «Сброс» справа от значения масштаба.

На всех страницах

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

  1. В верхнем правом углу браузера кликаем по иконке и переходим в раздел «Настройки».

  1. Далее открываем раздел «Дополнительно» в левой части экрана и обращаем внимание на правую часть страницы. Там пролистываем немного вниз до раздела «Оформление» и справа от «Масштаб страницы» нажимаем на указанное значение.

  1. В отобразившемся меню вы можете указать масштаб всех страниц в процентах от 25 до 500.

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

Примеры идеального первого экрана

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

Однако начнем с лендинга, оформленного неправильно.


Плохой пример оформления лендинга

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


Отображение лендинга в мобильной версии

Здесь нет ничего, кроме текста. Найти контакты сложно, форма заявки отсутствует, нет УТП и корректных заголовков.

Теперь обратите внимание на следующий пример:


Пример удачного оформления первого экрана лендинга

Мы видим главную страницу, на которой есть важная информация. Листать вниз не нужно, все УТП и преимущества представлены в виде «карусели». На основном экране информация четко разделена по блокам.

Взгляните на пример лендинга компании, занимающейся доставкой полезной еды:


Пример лендинга по доставке еды

Здесь мы видим яркий первый экран с формой заявки и основным преимуществом. Далее следует остальная часть с дополнительной информацией:


Оформление второго экрана лендинга по доставке еды

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

Ссылка на основную публикацию
Статьи c упоминанием слов:
Adblock
detector