2

Получил задание, адаптировать старенький сайт сделанный на CMS Diafan: artmaster.com.ua.

Через '@media' полностью подогнал его под максимальную ширину 320px. При этом структура контента сильно меняется и стили до 320px и после 320px несовместимы.

Минимальная ширина декстопного контента 760px, меньше он не ужимается так как установлен 'min-width'. При этом минимальное разрешение при котором весь контент отображается правильно 800px - если уменьшать, он просто прячется за правой гранью окна.

Вопрос: Можно ли используя мета-тег 'viewport' сделать так, чтобы сайт подстраивался под разрешение девайса, и при этом весь контент отображался !И! данное действие происходило только когда максимальная ширина девайса находится между 320px и 800px.

P.S.:Если нет, то подскажите, пожалуйста, какое решение стоит применить в данном случае.

3
  • 1
    а почему не использовать те же @media для ширины от 320 до 800 ? да, займет время выстилизировать все элементы под разные экраны.
    – Moonvvell
    23 дек 2015 в 11:10
  • 1
    И если задание адаптировать под все устройства(в смысле телефоны, планшеты и т.д.) то лучше использовать более принятые медиа запросы: max-width: 767, min-width: 768 max: 991, min:992 max: 1199, min:1200. А то к примеру на 6 айфоне ваш сайт уже плохо выглядит.
    – Moonvvell
    23 дек 2015 в 11:16
  • Спасибо, за ваш ответ) да, это решение я и применяю, но если бы был способ просто задать вьюпорт в пределах проблемного разрешения, то я бы хотел его попробовать. 23 дек 2015 в 11:31

2 ответа 2

1

Используйте тогда:

@media screen and (max-width: 767px) 
@media screen and (min-width: 768px) and (max-width: 991px)
@media screen and (min-width: 992px) and (max-width: 1199px)
@media screen and (min-width: 1200px)

Последний если надо конечно)

Если оставить просто до 320px то на большинстве устройств при landscape будет выглядеть плохо. В хроме в developer tools есть неплохое средство тестирования вида на мобильных устройствах. Можете проверять как будет приблизительно выглядеть на разных телефонах / планшетах

1

Для меня сработало следующее решение: я прописал скрипт прямо под мета-тегом 'viewport', а самому тегу дал одноименный id. Скрипт менял контент тега когда ширина экрана находилась в диапазоне 320-800px.

<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1"/>
<script type="text/javascript">
    setViewPort();
       function setViewPort() {
          if (screen.width > 320 && screen.width < 800) {
          document.getElementById("viewport").removeAttribute("content");
          document.getElementById("viewport").setAttribute("content", "width=device-width, maximum-scale=0.5");
    } else {
        document.getElementById("viewport").removeAttribute("content");
        document.getElementById("viewport").setAttribute("content", "width=device-width, initial-scale=1");
    }
}

</script>

В окончательном варианте, под свой конкретный случай я немного упростил его, но суть осталось той же.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.