Установить видовой экран только для ландшафтного режима

Question

Я заканчиваю свой сайт, и все работает отлично, за исключением одной мелочи. Когда я использую свой iPhone, портретный режим именно такой, как я хочу, проблема в ландшафтном режиме. Я как бы спроектировал его, но мне не нравится финальная версия... Поэтому мне нужно вставить еще одну строку кода, но я не знаю, как это сделать...

Это тот, который у меня сейчас

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

Теперь мне нужен только для ландшафтного режима. Я хочу, чтобы этот ^ работал все время, кроме ландшафтного режима. В ландшафтном режиме я хочу это:

<meta name="viewport" content="height=device-height,initial-scale=1">

Моя проблема в том, как мне сказать, что это должно работать только в ландшафтном режиме?

Спасибо

Answer 1

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

<table border="1" bgcolor="#eeeeee">
<tbody>
<tr>
<th>Property</th>
<th>Default Value</th>
<th>Minimum Value</th>
<th>Maximum Value</th>
</tr>
<tr>
<td>width</td>
<td>980</td>
<td>200</td>
<td>10000</td>
</tr>
<tr>
<td>height</td>
<td>based on aspect ratio</td>
<td>223</td>
<td>10000</td>
</tr>
<tr>
<td>inital-scale</td>
<td>fit to screen</td>
<td>minimum-scale</td>
<td>maximum-scale</td>
</tr>
<tr>
<td>user-scalable</td>
<td>yes</td>
<td>no</td>
<td>yes</td>
</tr>
<tr>
<td>minimum-scale</td>
<td>0.25</td>
<td>&gt; 0</td>
<td>10</td>
</tr>
<tr>
<td>maximum-scale</td>
<td>1.6</td>
<td>&gt;0</td>
<td>10</td>
</tr>
</tbody>
</table>

Начальный масштаб - это тот, который отображается при начальной загрузке страницы. Масштаб изменяется путем зажима и двойного нажатия на устройстве. Вместо использования фиксированной ширины, вы должны использовать width="device-width", которая автоматически делает ширину равной ширине экрана устройства: <meta name="viewport" content="width=device-width/" > Чтобы пользователи не могли расширить размер окна за пределы размера, необходимого для правильного отображения, вы можете установить максимальный масштаб на 1.0. Я бы осторожно использовал эту технику, поскольку она лишает пользователя возможности увеличивать страницу для просмотра на меньших экранах, таких как iPhone. Тем не менее, вот как это делается:

<meta name="viewport" content="width=device-width, maximum-scale=1.0" />

Использование JavaScript для iPhone и iPad Ориентация

Метатеги, показанные выше, работают очень хорошо, однако вы также можете использовать JavaScript, чтобы делать то же самое, поскольку и iPad, и iPhone поддерживают язык сценариев. Следующая функция JavaScript обнаруживает и устанавливает ориентацию области просмотра устройства, используя свойство innerWidth объекта window и регулярно устанавливая атрибут orient элемента body (в данном случае каждые 4 секунды):

<script type="text/javascript">
var updateLayout = function() {
  if (window.innerWidth != currentWidth) {
    currentWidth = window.innerWidth;
    var orient = (currentWidth == 320) ? "profile" : "landscape";
    document.body.setAttribute("orient", orient);
    window.scrollTo(0, 1);
  }
};

iPhone.DomLoad(updateLayout);
setInterval(updateLayout, 4000);
</script>

Вы можете поместить вышеупомянутый фрагмент в ГОЛОВКУ вашей веб-страницы, готовой для iPhone / iPad, и он установит для дисплея соответствующую настройку ориентации. Использование CSS для iPhone и iPad Ориентация

Другой метод, который вы можете использовать в своих интересах - это использование каскадных таблиц стилей (CSS). Очевидно, вам понадобится таблица стилей, предназначенная для портретного использования, а другая - для альбомного. О создании таких таблиц стилей мы расскажем в следующей статье, но сейчас вам нужно знать, как вы будете их использовать. Это так же просто, как добавить ссылку на ваши таблицы стилей в теге HEAD:

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">