Div с фиксированной шириной рендеринга слишком широка в iPad

Question

Я пытаюсь оптимизировать одну из своих страниц для iPad.Вы можете увидеть мою тестовую страницу здесь: http://demo.dennismadsen.com/ipad/

Она содержит черный ящик шириной 800 пикселей.Когда я вижу его на своем iPad и делаю снимок экрана, я вижу, что поле больше при ширине 800 пикселей - около 837 пикселей: http://demo.dennismadsen.com/ipad/screenshot.png

Мне интересно, почему это происходит?

Answer 1

Независимо от фактической ширины вашего сайта и его элементов, устройства iOS будут пытаться масштабировать ваш контент для оптимального просмотра.

Чтобы прекратить это, поместите это в заголовок HTML:

<meta name="viewport" content="initial-scale=1.0;">

Answer 2

Отметьте тег <meta> над тегом <title>, где максимальная ширина и минимальная ширина определяют

, используйте этот код:

<link media="only screen and (max-device-width: 480px)" href="small-device.css" type= "text/css" rel="stylesheet">

<link media="screen and (min-device-width: 481px)" href="not-small-device.css" type="text/css" rel="stylesheet">