@media не работает правильно для меня

Question

@media не работает правильно для меня

0

У меня есть файл css, который выглядит так:

#foo{
    width: 35%;
    height: 380px;
}

@media only screen and (max-device-width: 480px) {
    #foo{
        width: 100%;
        height: 100%;
    }
}

Когда я запускаю html из мобильного браузера, он не отображается в полноэкранном режиме, любая идея, что нужно изменить? Ive попробовал Safari и Chrome и, похоже, не применял изменения на мобильном устройстве.

gjw80 20 сен. 2013, в 22:36

Источник

Теги:

html

css

mobile

2 ответа

0

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

Тестирование вашего кода в браузере, уменьшив его на моем ноутбуке без "device-".

#foo{
    width: 35%;
    height: 380px;
}

@media only screen and (max-width: 480px) {
    #foo{
        width: 100%;
        height: 100%;
    }
}

Nick V 20 сен. 2013, в 19:09

Ещё вопросы

Theodore Brown · Accepted Answer · 2013-09-20T20-23-00.000Z

Убедитесь, что метка meta viewport установлена с шириной = ширина устройства:

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