У меня есть файл css, который выглядит так:
#foo{
width: 35%;
height: 380px;
}
@media only screen and (max-device-width: 480px) {
#foo{
width: 100%;
height: 100%;
}
}
Когда я запускаю html из мобильного браузера, он не отображается в полноэкранном режиме, любая идея, что нужно изменить? Ive попробовал Safari и Chrome и, похоже, не применял изменения на мобильном устройстве.
Убедитесь, что метка meta viewport установлена с шириной = ширина устройства:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
Единственное, о чем я могу думать, это то, что на устройстве, которое вы тестируете, на самом деле есть экран размером более 480 пикселей.
Тестирование вашего кода в браузере, уменьшив его на моем ноутбуке без "device-".
#foo{
width: 35%;
height: 380px;
}
@media only screen and (max-width: 480px) {
#foo{
width: 100%;
height: 100%;
}
}