Различное масштабирование на iPhone / iPad

Question

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

Сайт построен с центрированным контейнером, приблизительно 15-20% пространства с левой стороны.

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

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

Заранее спасибо!

Answer 1

Вы можете включить css в заголовок страницы, посмотрев на ее параметр устройства

<style type="text/css" media="screen and (max-device-width: 480px)">
    /*for iphone only*/
</style>

ИЛИ Другой способ - создать файл css mobile.css только для мобильных устройств и включить этот CSS в приведенный ниже javascript: -

<script type="text/javascript">
    // checking if the device is iphone, ipod or ipad
    if ((navigator.userAgent.indexOf("iPad") > 0)
        || (navigator.userAgent.indexOf("iPod") > 0)
        || (navigator.userAgent.indexOf("iPhone") > 0)) {
        // including the css file
        document.write("<link href='mobile.css' rel='stylesheet' type='text/css' />");
    }
</script>

Answer 2

Вы используете проценты для перемещения контейнера влево?

Вы уверены, что не дали контейнеру фиксированные width и margin:0 auto; с помощью CSS?А затем поместите этот метатег в заголовок веб-страницы HTML, чтобы телефоны относились к нему правильно?

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

Потому что, насколько я знаю, вы используете margin:0 auto; метод центрирования.

Дайте контейнеру несколько отступов, например padding:1em;, и все будет в порядке.:)