Search the Community

В общем свежая безумная идея сделать интерфейс на VPU(view port units) таким образом чтобы избежать media queries. Сейчас сделано определение мобильной версии браузера и на CSS4 vars сделаны переключатели масштаба элементов интерфейса. Поскольку дизайн полностью масштабируется под размер окна и не нужны ни какие костыли и сетки, я хочу добавить в свой фреймворк такую опцию, как автоматическая генерация Android приложения, которое бы работало на Web View. У нас уже везде webkit и можно было бы сделать заготовку приложения, которая бы скрывала строку ввода адреса браузера, но оставляла возможность поменять URL, на который обращается приложение. Я не пишу под андроид и мне бы очень не помешал пример такого приложения с возможностью на сервере через PHP поменять иконку и URL. Интерфейс у меня написан полностью динамический на ECMA Script fetch и вместе с SVG графикой весит примерно 300Кб не сжатого сервером кода, что гораздо лучше, чем разрабатывать отдельное приложение для mobile web. Мой проект RevolveR CMF: https://revolvercmf.ru/ (сайт сообщества, на котором пока ни чего нет - просто чтобы протестировать интерфейс на VPU и SPAx). Видео обзор системы: Дистрибутив для установки вот здесь: https://github.com/Full-Rx/RevolveR-framework/releases/tag/1.9.2.x Группа на facebook тут: https://www.facebook.com/groups/331465761595917 Фреймворк позиционируется, как замена Drupal и предоставляет широкий спектр функций для создания сайта сообщества. Интерфейс написан самостоятельный с чистого листа на ECMA Script 7, а backend реализован на PHP SPL 7.4. Для базы данных реализован мощный кэш с шифрованием и система оптимизирована под высокие нагрузки. Сам интерфейс легко меняется с помощью CSS, что позволяет не сильно модифицировать шаблон при создании своей темы оформления. Хочу подсказать как лучше реализовать View Port Unit интерфейс, который сейчас работает через calc просто подменяя значение переменной для масштабирования элементов под мобильные устройства. Дело в том, что сейчас уже не нужны ни какие media queries и grids(сетки), а также нет нужды во flex-box так как VPU прекрасно позволяют реализовывать интерфейс для любых дисплеев так, что он смотрится одинокого, как это сделано в операционной системе Windows, например. Давайте покумекаем, как мы можем это использовать для современных интерфейсов, чтобы сэкономить себе время на создание верстки и дизайна. Мне кажется моя идея выгорает хотя бы экономией времени и денег на создании мобильного приложения.

Дизайнер клиента придумал такой креатив. Есть 2 макета страницы - мобильный вид (320 px) и десктопный (1440 px). По его задумке, на устройствах до портретной ориентации планшетов должен показываться мобильный вид. Т.е. открываем на ipad в портретной ориентации - видим на весь экран мобильный вид. Открываем на десктопе или ipad в ландшафтном положении - видим десктопный. При этом нет адаптива - оно всё должно просто zoom-иться (как будто я неадаптивный сайт смотрю с указанным для него viewport) - т.е. на упомянутом ipad страница уменьшается чтобы вписаться в устройство. Такое вообще реализуемо? Два viewportа прописать, понятно, нельзя. Менять его от @media - тоже. Можно, наверное, извратиться, и подменять его через JS под размер окна браузера пользователя, но это как-то не правильно, ИМХО. Может быть есть какие-то другие приёмы?

Помогите, пожалуйста, очень нужен взгляд со стороны. Проблема следующая - страница нормально отображается в десктопной версии, при ресайзе окна - тоже все ок. Но в режиме эмуляции моб. устройств ширина экрана больше чем ширина содержимого страницы. При этом проблема только в chrome firefox отображает нормально в любом режиме. Ниже скрин (режим моб. устройств). Код можно посмотреть здесь.

Заголовок многообещающий, но после прочтения не получила ответ на вопрос в заголовке. Так почему же viewport метатег? http://css-live.ru/html5/pochemu-viewport-metateg.html?utm_source=feedburner&utm_medium=email&utm_campaign=Feed%3A+css-live+%28Css-live+-+%D0%A1%D0%B2%D0%B5%D1%80%D1%81%D1%82%D0%B0%D0%B9+%D1%81%D0%B2%D0%BE%D0%B9+%D0%BC%D0%B8%D1%80%21%29

При отсутствии тега вьюпорт сайт не влезает во весь экран на айпаде. При использовании вьюпорта width=device-width сайт обрезается и справа появляется пустое пространство. Прокрутить горизонтально сайт не получается. Если сделать вьюпорт width=1200px, то все нормально. В чем может быть проблема? Скриншот прилагаю: http://i68.fastpic.ru/big/2014/1227/ac/573759c329f769151b075bc23a900cac.jpg

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">Используется такой такой мета-тэг. Задача состоит в том, чтобы его применять ТОЛЬКО в случае, если размер экрана меньше 768px. Если экран больше 768px, то сайт должен вписываться в экран полностью (как это происходит по умолчанию). В данном случае есть мобильная версия, которая срабатывает на экранах, если размер окна браузера или экрана меньше 768px. Как поступить? Спасибо.

Здравствуйте. Страница имеет body{width: 1500px} и <meta name="viewport" content="width=1500">. По моим представлениям того, как работает viewport, при загрузке страницы она должна быть видна во всю ширину. Реально же, похоже, так получается только если iPhone/iPad так сказать в landscape mode, повёрнутый набок. В вертикальном же положении имеет подобную картину: Я пробовал также экспериментировать с initial-scale и ещё с чем-то, но вот лучше этого, что есть, пока ничего не получилось. Есть ли идеи у кого-нибудь, как пофиксить это дело?

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