Как создать условие подключения viewport?

Question

[Амир Гафуров]

Как создать условие подключения viewport, а именно, чтобы

<meta content="width=device-width, user-scalable=no, initial-scale=1" name="viewport">

срабатывал только при альбомной ориентации, а в портретной этого тега не было?

Желательно без использования JS, есть ли что-нибудь похожее на <!--[if IE]><![endif]--> ?

Answer 1

[Alexander Mischuk]

Вы делаете сайт для одного устройства?
Можете подключать файл стилей, отвечающий за адаптивность, в таком виде:
link rel="stylesheet" href="media-quries.css" media="only screen and (orientation : landscape)"
И на сколько я помню часть браузеров не понимает такого параметра, как ориентация в медиа-запросе.
Ну и для основного сайта достаточно задать:
meta name="viewport" content="width=device-width"
Задавать минимальный или максимальный масшатб ни к чему, а запрещать пользователю менять масштаб для обычныго сайта считается дурным тоном.

Comments

[Амир Гафуров]

@Mischuk благодарю, насчёт дурного тона не знал

Answer 2

[Kirill Popolov]

Никак. Вам точно нужен этот тег?

Comments

[Амир Гафуров]

нужен, но не обязательно, если в media queries можно этот тег перенести

[Kirill Popolov]

@amir73911 перенести нельзя. Опишите, в чем состоит задача? Определить ориентацию можно так: @media (orientation: landscape), о чем уже написал @iiil

[Амир Гафуров]

@ezhikov да, но этот медиа тег запрещает масштабирование, мне же нужно, чтобы при портретной ориентации это можно было сделать

[Амир Гафуров]

@Aingis вот именно, что для адаптивного дизайна нужно оставить это:) вот поэтому сложная ситуация, как можно использовать разные условия при разных разрешениях

[Kirill Popolov]

@amir73911 я в своих последних адаптивных сайтах вообще не использовал этот мета-тег. Медиазапросов в большинстве случаев достаточно.

[Амир Гафуров]

@Aingis , @ezhikov спасибо, учту!

Answer 3

[Юрий Лобанов]

Ориентацию можно узнать в медиа-запросах. Сформулируйте задачу, зачем Вам так понадобилось сделать?

Comments

[Амир Гафуров]

нужно чтобы в портретном варианте не работала адаптивная верстка и была возможность масштабирования сайта (пальцами щипком), будто нет адаптивной верстки вовсе

[Юрий Лобанов]

@amir73911 запрещать масштабирование я не рекомендую. Зачем Вам это и почему , если уж запрещаете, то только для определенной ориентации?
Сделать такое можно, в голову приходят варианты - не знаю, сработают ли, но пока мне непонятно зачем Вам это - я даже пытаться не буду и время тратить.

[Амир Гафуров]

@iiil Вы всё верно написали. От части я так же хотел использовать этот тег, потому что если указываем только width=device-width, то фон не растягивается на всю ширину сайта, а только на ширину девайса