Jump to content
  • 0

Проблема с viewport


Blackbird
 Share

Question

При отсутствии тега вьюпорт сайт не влезает во весь экран на айпаде. При использовании вьюпорта width=device-width сайт обрезается и справа появляется пустое пространство. Прокрутить горизонтально сайт не получается. Если сделать вьюпорт width=1200px, то все нормально. В чем может быть проблема?

Скриншот прилагаю: http://i68.fastpic.ru/big/2014/1227/ac/573759c329f769151b075bc23a900cac.jpg

Link to comment
Share on other sites

0 answers to this question

Recommended Posts

There have been no answers to this question yet

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

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

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

      Ниже скрин (режим моб. устройств).
      Код можно посмотреть здесь.

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

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy