Метатег области просмотра для устройств iOS

#ipad #html #viewport #meta-tags

#iPad #HTML #область просмотра #мета-теги

Вопрос:

Указывает ли

 <meta name="viewport" content="width=device-width" />
 

имеет тот же эффект, что и указание

 <meta name="viewport" content="width=768" />
 

для ipad?

Ответ №1:

Это действительно зависит от ориентации устройства: установка определенного значения пикселя приведет к масштабированию вашего макета с коэффициентом 1,333, чтобы он соответствовал ширине устройства 1024 пикселей в альбомном режиме.

width=device-width С другой стороны, настройка ничего не увеличит, но изменит ширину области просмотра, для которой затем можно создать оптимизированный макет с помощью медиазапросов. Или это, по крайней мере, теория: iPad каким-то образом интерпретирует width=device-width как 768 пикселей даже в ландшафтном режиме. Чтобы получить реальную ширину устройства, вы должны добавить начальный масштаб = 1.

Следовательно, я не согласен с предложением Джеймса. Просто идите за:

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

и справляйтесь с различиями в размерах, используя методы гибкой / адаптивной компоновки.

Комментарии:

1. Спасибо за ответ, Андреас, у меня создалось впечатление, что device-width возвращает ширину устройства ipad (768 пикселей), независимо от того, было ли оно в книжном или альбомном формате

2. Поздний ответ. Вы правы. <meta name=»viewport» content=»width=device-width, initial-scale = 1″> необходим для получения реальной ширины устройства на iPad.

3. У меня это не работает, по какой-то причине в альбомной ориентации ширина устанавливается на некоторое значение, превышающее ширину альбомной ориентации устройства, без уважительной причины.

4. ОБНОВЛЕНИЕ : исправлено, также установив maximum-scale=1