Сайт не заполняет экран на iPad

Question

Сайт не заполняет экран на iPad

0

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

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

@media only screen and (min-width: 320px) and (max-width: 480px) {
    /* iPhone */
    .container { width: 100%; max-width: 480px; }
    ...
}   

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    /* iPad */
    ...
}

Однако у меня проблема с iPad. Окно просмотра этого устройства имеет ширину 768 пикселей, поэтому сайт правильно отображается, но сдвигается влево, поскольку его ширина уже.

Мой вопрос в том, есть ли способ сосредоточить сайт или, наоборот, заставить его заполнить весь экран iPad?

заранее спасибо

user1991185 16 фев. 2014, в 08:29

Источник

1

Может быть, вы можете сделать сайт текучим, вместо того, чтобы иметь такие строгие точки останова. На некоторых устройствах, даже если вы их центрируете, - вы будете тратить много места на полях сайта - на экранах определенного размера.
sheriffderek 16 фев. 2014, в 08:44

Теги:

html

css

responsive-design

media-queries

ipad

2 ответа

Ещё вопросы

Может быть, вы можете сделать сайт текучим, вместо того, чтобы иметь такие строгие точки останова. На некоторых устройствах, даже если вы их центрируете, - вы будете тратить много места на полях сайта - на экранах определенного размера.

dieortin · Answer 1 · 2014-02-16T07-38-00.000Z

Зачем делать сайт шириной 600 пикселей? Вы должны сделать сайт заполнять 100% окна просмотра по умолчанию, а затем корректировать поля вокруг содержимого, font-size, размера изображений и т.д. Для каждого размера экрана, чтобы контент адаптировался.

Вы можете взять этот сайт в качестве примера. Если вы попытаетесь сделать окно браузера большим и меньшим, вы увидите, что все содержимое адаптируется (и даже мобильное меню появляется, когда область просмотра мала). Все это выполняется с помощью мультимедийных запросов для разных размеров экрана.

(Извините за мой синтаксис)

Sarcoma · Answer 2 · 2014-02-16T04-31-00.000Z

Попробуй это:

<meta name="viewport" content="600" />

Подробнее об этом здесь: https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag

Или центрировать контейнер (при условии, что он имеет ширину 600 пикселей)

.container {
    width:600px;
    margin:0 auto;
}

Хотя, возможно, стоит сделать сайт более крупным.