Jump to content
  • 0

viewport для разных размеров экрана

Bravo

Asked by Bravo,

 Share

Question

Bravo Explorer

Bravo

Posted
Posted 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Используется такой такой мета-тэг. Задача состоит в том, чтобы его применять ТОЛЬКО в случае, если размер экрана меньше 768px. Если экран больше 768px, то сайт должен вписываться в экран полностью (как это происходит по умолчанию).

 

В данном случае есть мобильная версия, которая срабатывает на экранах, если размер окна браузера или экрана меньше 768px.

 

Как поступить? :) 

 

Спасибо.

Link to comment
Share on other sites

6 answers to this question

Recommended Posts

  • 0
Bravo Explorer

Bravo

Posted
  • Author
Posted

Попробовал такое:

@media only screen and (max-width: 767px) {	@viewport {		width: device-width;		zoom: 1;		max-zoom: 1;		user-zoom: fixed;	}	@-webkit-viewport {		width: device-width;		zoom: 1;		max-zoom: 1;		user-zoom: fixed;	}		@-ms-viewport {		width: device-width;		zoom: 1;		max-zoom: 1;		user-zoom: fixed;	}}

Не сработало полностью.

Link to comment
Share on other sites
  • 0
Great Rash Explorer

Great Rash

Posted
Posted

Вообще есть в CSS @viewport, но в интернетах пишут, что поддерживается только в IE (на момент написания статьи, которую я читал, актуальна была 10 версия) и Opera, так что в старых iOS и Android скорее всего поддержки не будет.

Если надо кроссбраузерно, то только скрипты видимо.

Link to comment
Share on other sites
  • 0
Bravo Explorer

Bravo

Posted
  • Author
Posted

Вообще есть в CSS @viewport, но в интернетах пишут, что поддерживается только в IE (на момент написания статьи, которую я читал, актуальна была 10 версия) и Opera, так что в старых iOS и Android скорее всего поддержки не будет.

Если надо кроссбраузерно, то только скрипты видимо.

 

Спасибо за ответ. Качественное JS решения не знаете с учетом проверки мобильное ли устройство + размеры экрана? Исключить iPad'ы надо.

Link to comment
Share on other sites
  • 0
Great Rash Explorer

Great Rash

Posted
Posted

Я думаю, что тут JS-решение не подойдёт. Наша задача отдать устройству meta-тег, до того как начнёт строиться DOM. Поэтому на ум приходят только серверные скрипты. Ибо, как мне кажется, когда парсер в браузере доходит до скрипта и начинает его обрабатывать viewport уже обработан.

UPD: погуглил немного, попробуйте это.

Link to comment
Share on other sites
  • 0
Z1gnet Explorer

Z1gnet

Posted
Posted (edited)

ну можно просто в <head> вставить небольшой скрипт

<script>if(screen.width <= '767'){document.write('<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">');}</script>

ну тут правда не учитывается какое устройство, только ширина экрана.

p.s. так и не понял чем вам мешает этот метатег при разрешении больше 768рх

Edited by Z1gnet
Link to comment
Share on other sites

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
Go to question listing

  • Similar Content

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

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

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

    • Blackbird
      Проблема с viewport
      By Blackbird
      При отсутствии тега вьюпорт сайт не влезает во весь экран на айпаде. При использовании вьюпорта width=device-width сайт обрезается и справа появляется пустое пространство. Прокрутить горизонтально сайт не получается. Если сделать вьюпорт width=1200px, то все нормально. В чем может быть проблема?
      Скриншот прилагаю: http://i68.fastpic.ru/big/2014/1227/ac/573759c329f769151b075bc23a900cac.jpg
    • amelice
      Только мне одной не понятно?
      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
×
×
  • 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

  I accept