Я пытаюсь понять метатег видового экрана для устройств iOS. Я создал тестовую страницу, на которую вставил изображение шириной 862 пикселя. поэтому у меня есть метатег области просмотра как:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale: .5, maximum-scale: 5.0">
Тем не менее, на ipad 3 с шириной разрешения 1536 пикселей и с установленным окном просмотра такое же количество видимой области, как у ipad 3, изображение размером 862 пикселей увеличено и немного больше по ширине, чем видимая область. поэтому мне нужно прокрутить по горизонтали, чтобы увидеть остальную часть изображения.
Это заставляет меня думать, что device-width возвращает 768 пикселей, и это объясняет небольшую дополнительную горизонтальную прокрутку для изображения 862 пикселей. Почему он это делает? Есть ли какая-то плотность пикселей, которую я должен учитывать?
ОБНОВЛЕНИЕ
Я попытался установить для ширины числовую ширину, точно такую же ширину изображения (в данном случае «862»). Таким образом, размер веб-страницы 862X206, такой же, как у изображения, но он делает то же самое, что и установка ширины на device-width.
ОБНОВЛЕНИЕ 2
Я создал очень простую страницу, и по какой-то причине пустая страница с окном просмотра 862 пикселя вызывает горизонтальную и вертикальную прокрутку на моем ipad 3, код:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=862, initial-scale=1.0">
</head>
<body style="width:100%; padding:0; margin:0">
</body>
</html>
Эта прокрутка приводит к тому, что область просмотра не помещается в видимой области или размере экрана. Я не понимаю. Приветствуется любое понимание. Спасибо. ** Примечание ** Я забыл добавить сброс отступов и полей до 0, это добавляло 8 пикселей поля.
ОБНОВЛЕНИЕ 3
Хорошо, изначально я думал, что device-width вернет ширину разрешения 1536 пикселей ipad 3. Судя по всему, он возвращает размер экрана 768 пикселей.
Любая ширина области просмотра больше 768 дает мне возможность прокрутки на ipad 3. Почему? что, если бы у вас была страница размером 1024 пикселя, и вы хотите уместить ее в видимую область ipad 3. вы устанавливаете ширину 1024, начальную шкалу равной 1, не должно ли это заставлять область просмотра 1024 пикселей вписываться в видимая область?
РЕШЕНИЕ
Итак, если вы хотите, чтобы каждое устройство определяло, как масштабировать вашу страницу, все, что вам нужно сделать, это оставить начальный масштаб.
Поэтому, если я устанавливаю только ширину, используя либо ширину устройства, либо числовое значение, и оставляю начальный масштаб, он автоматически вычисляет масштаб для вас. и это просто работает.
Моя путаница заключалась в том, что означает ширина, ширина означает ширину до применения шкалы, поэтому, если я скажу:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale: .5, maximum-scale: 5.0">
ширина области просмотра до масштабирования составляет 768 пикселей, и если тело веб-страницы, скажем, составляет 862 пикселей, а после применения коэффициента масштабирования 1.0, содержимое умножается на 1.0, 862 * 1.0, поэтому ширина области просмотра теперь ширина содержимого, масштабированного с этим коэффициентом масштабирования, 862 пикселей. Надеюсь, я правильно это понимаю. вот где было мое замешательство, вот что означала ширина.
