misc/class
lib/jquery_pnotify, lib/moment, lib/lodash, misc/notification, site/engine, misc/social
if( $.browser.msie && $.browser.version <= 8 ) include('lib/respond'); $._social.__cfg = {"init":[{"service":"basic"},{"fb_app_id":"1997094873850041","service":"fb"},{"vk_app_id":"2978320","service":"vk"},{"service":"twi"}],"like":[{"service":"fb"},{"service":"vk"},{"via":"","channel":"","hash_tag":"","service":"twi"}]}; window._SiteEngine = new classes.SiteEngine( { user_id: 0, controller: 'content_article', action: 'view', content_css_version: '1459538664', social_enabled: 0} );

Faiwer

Блог web-программиста

Мобильная вёрстка

 — 
2 апреля 2016 00:00

Прицепил к этому блогу мобильную вёрстку. Учитывая насколько примитивен здесь дизайн, это оказалось несложно. Заняло 10-15 минут. Хочу остановиться на ключевых моментах.

<meta/>

Для начала необходимо указать браузерам то, что они вольны в определённых пределах менять пикселное разрешение viewport-а. По-умолчанию мобильные браузеры исходят из того, что едва ли сайт адаптирован к мобильной вёрстке, а значит, рендерить его в комфортных для просмотра 500px по ширине = убить всю вёрстку вхлам. Поэтому для viewport-а устанавливается что-нибудь вроде 1280px, и экран мобильника имитирует из себя полноценный монитор.

Если влепить в HTML такой мета-тег: <meta name="viewport" content="width=device-width; initial-scale=1.0"/>, то браузер будет волен взять такой width, который вшит в устройство как комфортный для данной модели. В зависимости от того, какого размера экран, это число будет различным. К примеру если у вас какая-нибудь лопата или планшет, то там и за 1000px может перевалить.

Параметр initial-scale немаловажен, т.к. он фиксирует изначальный zoom страницы в значение 100%. Дескать не надо извращений, всё адаптировано и отобразится хорошо.

Media-Queries

Дальнейшие шаманства, в основном, связаны с media-queries. Для тех кто с ними не знаком, это такая возможность задать ряд CSS правил, которые будут применяться в зависимости от ситуации. К примеру только тогда, когда ширина экрана не превышает x-пикселей:

@media screen and (max-width: 980px){}

Или наоборот, когда не менее х-пикселей:

@media screen and (min-width: 980px){}

Вариаций и трюков довольно много. Но эти два самые распространённые. 

В шапке сайта сверху справа отображается иконка дельтаплана. На малых экранах она перегораживает меню. Скрываем её:

@media screen and (max-width: 980px)
{
    header .sh_top:after { display: none; }
}

YouTube и прочие <iframe/>-ы

С ними всё сложнее. Они отображаются с фиксированными, вшитыми размерами. Но ведь у нас плавающая ширина сайта. Что делать? Главная проблема ― как задать height пропорциональным width? Ну можно сделать, скажем так:

  1. Располагаем <iframe/> внутри другого блока-обёртки
  2. Блоку обёртке задаём
    • width: 100%
    • position: relative
    • height: 0px
    • padding-bottom: 56.25%
    • font-size: 0; line-height: 0;
  3. Самому <iframe/>-у:
    • position: absolute
    • top: 0; left: 0; width: 100%; height: 100%;

Т.е., по сути, мы заставляем <iframe/> занимать 100% родительского блока. А сам родительский блок занимает всю ширину экрана. При этом его высота зависит от его ширины, благодаря свойству padding-bottom. Шрифты гасим в ноль, дабы убрать нежелательные отступы.

Изображения

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

.site_content img {
   max-width: 100%;
   height: auto !important;
}

Т.е. ограничиваем их максимальную ширину (это свойство сильнее, чем width). А height насильно срезаем, задав ему auto. Это довольно грубое и нехорошее решение. Но, увы, других простых решений на этот счёт я не знаю. Проблемы:

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

Однако результат того стоит. Если вы знаете решение получше, милости прошу в комментарии или мне на почту ;)

Теги:
CSS
Комментарии
Оставить комментарий
Оставить комментарий:
Отправить через:
Предпросмотр
modules/comment
window._Comment_content_article_140 = new classes.Comment( '#comment_block_content_article_140', { type: 'content_article', node_id: '140', user: 1, user_id: 0, admin: 0, view_time: null, msg: { empty: 'Комментарий пуст', ask_link: 'Ссылка:', ask_img: 'Ссылка на изображение:' } });