10 трюков поиска в «яндексе», с которыми ты забудешь про google

Проблема: слишком крупный текст на мобильном экране

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


3.1. Media Queries

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

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

Синтаксис медиа-выражений:

Основные типы носителей:

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

Наиболее часто используемые медиа-функции:

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

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

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

3.2. Media Queries + Rem

Есть другой приём, который позволит изменить размер шрифта на всей странице разом — это единица размера (root em), которая похожа на , но вместо сложной цепочки зависимостей по родительским элементам, она вычисляется только на основе размера шрифта элемента .

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

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

Проблема: мелкие элементы управления и плохо различимый текст

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

Давайте сразу зададим комфортный масштаб, для этого достаточно добавить один тег в :


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

Без мета-тега страница обрезалась по ширине стандартной величины viewport браузера:

После мы добавили мета-тег, устанавливающий ширину видимой области страницы в оптимальное значение, определённое производителем устройства:

Основные свойства мета-тега viewport:

  • — ширина видимой области. Рекомендуемое значение: . Принимает натуральное число или ключевое слово , устанавливающее оптимальную ширину viewport для устройства. Таблицу значений по различным устройствам можно посмотреть на сайте mydevice.io/devices.
  • — высота видимой области. Работает аналогично , только используется ключевое слово .
  • — первоначальный масштаб страницы. Рекомендуемое значение: . Принимает число от 1 до 5.
  • — минимальный масштаб страницы. Принимает натуральное число, которое идеологически должно быть меньше или равным . Значение запретит уменьшение масштаба страницы.
  • — максимальный масштаб страницы. Принимает натуральное число, которое идеологически должно быть больше или равным . Значение запретит увеличение масштаба страницы.
  • — отключает или включает возможность масштабирования страницы. Принимает значение или . Масштабирование отключается также при указании одинаковых значений и .

В стандарте CSS есть черновик, описывающий специальное правило @viewport, которое на сегодняшний день . Мета-тег с аналогичной функциональностью был придуман в Apple и сегодня поддерживается всеми современными мобильными браузерами, поэтому на практике используем его.

Скачивание и установка

Скачать яндекс браузер на свой смартфон можно через Play Market или App Store, а также с помощью ПК. И также можно получить прямую ссылку для скачивания от компании Яндекс, указав номер телефона по адресу https://browser.yandex.ru/mobile/.

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

Скачивание на мобильные устройства, работающие на системе iOS, осуществляется через магазин App Store. Принцип загрузки и установки браузера на устройства от компании Apple ничем не отличается от установки на смартфоны с операционной системой Android. После нажатия кнопки «Unstall» произойдет скачивание и установка программы на смартфон.

В тех случаях, когда не работает мобильный интернет или Wi-Fi, нет возможности воспользоваться Play Market или App Store, для установки яндекс браузера можно использовать компьютер. Для этого потребуется найти АПК-файл в интернете и скачать его на компьютер. При поиске и скачивании установочного файла следует пользоваться проверенными и надежными сайтами. Следует помнить, что программа распространяется бесплатно и не взымает платежи, поэтому игнорируйте сайты, которые просят оплату за скачивание установочного файла.

После того как АПК-файл был сохранен на компьютере, необходимо подключить к нему смартфон с помощью USB-кабеля. Затем скопировать файл в одну из папок на телефоне и отключить кабель. В настройках смартфона обязательно нужно разрешить установку приложений из других источников помимо Play Market. Затем необходимо найти АПК-файл на смартфоне и запустить его.


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

Достоинства программы

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

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

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

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

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

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

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

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

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

Проблема: фотографии некрасиво вписываются в экран

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


Так на мобильном экране будет выглядеть большая картинка без каких-либо стилей:

Благодаря новой единице размера (viewport height) мы можем легко установить высоту картинки, равную высоте экрана:

Теперь давайте впишем картинку в экран по ширине:

Из-за ограничения максимальной ширины изображение исказилось, сплющившись по ширине. Это можно исправить с помощью нового свойства :

В итоге красиво вписать картинку в мобильный экран можно всего тремя свойствами:

Новые единицы размеров в CSS:

  • — 1% от ширины viewport.
  • — 1% от высоты viewport.
  • — 1% от меньшей стороны (ширины или высоты) viewport.
  • — 1% от большей стороны (ширины или высоты) viewport.

Наконец-то, в CSS можно легко указывать относительные вертикальные размеры! достаточно хорошая, за исключением IE11 и Edge14, где не работает .

Свойство object-fit позволяет легко управлять масштабом и соотношением сторон изображений, но при этом обязательно должны быть заданы как ширина, так и высота. Можно сказать, что это свойство является неким аналогом свойства background-size, только для обычных изображений, а не фоновых. также на высоте, за исключением IE11 и Edge13.

Заключение и полезные ссылки

Мы рассмотрели ряд практических техник, которые помогут быстро сделать обычный сайт адаптивным под любые размеры экрана. Адаптивная вёрстка — это удобно, как для пользователя, так и для разработчика, который со временем станет смотреть на дизайн сразу с точки зрения экранов различных размеров. Такой подход лёгок в поддержке и выглядит достойно даже в сравнении с отдельной мобильной версией.

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

  • Bootstrap — пожалуй, самый известный CSS-фреймворк.
  • Foundation — мощный CSS-фреймворк для сайтов, писем и веб-приложений.
  • Skeleton — минималистичный CSS-фреймворк с фиксированными сетками.
  • Jeet — система сеток для SCSS и Stylus.
  • Susy — система сеток для SASS.
  • Fluidable — система сеток для LESS.

С этим читают