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

Мой веб-сайт запущен и работает на сервере моего университета, так что вы можете просматривать мои медиа-запросы оттуда: http: // stc110. edu.csesalford.com/ или http://stc110.edu.csesalford.com/ general.css

Это мои медиа-запросы:

/*Styles for screen 600px and lower*/
@media handheld, screen and (max-width: 600px) {
    #navigation { 
        height: auto;
    }
    #navigation ul {
        width: 100%;
        display: block;
        height: auto;
    }
    #navigation li {
        width: 50%;
        float: left;
        position: relative;
    }
    #navigation li a {
        border-bottom: 1px solid #ff9999;
        border-right: 1px solid #ff9999;
    }
    #navigation a {
        text-align: left;
        width: 100%;
        text-indent: 25px;
    }
    header {
        padding-top: 30px; 
    }
}

/*Styles for screen 480px and lower*/
@media handheld, screen and (max-width : 480px) {
    #navigation {
        border-bottom: 0;
    }
    #navigation ul {
        display: none;
        height: auto;
    }
    #navigation a#pull {
        display: block;
        background-color: #ff6666;
        width: 100%;
        position: relative;
    }
    #navigation a#pull:after {
        content:"";
        background: url('images/nav-icon.png') no-repeat;
        width: 30px;
        height: 30px;
        display: inline-block;
        position: absolute;
        right: 15px;
        top: 10px;
    }
}

/*Smartphone*/
@media handheld {
    #navigation {
        border-bottom: 0;
    }
    #navigation ul {
        display: none;
        height: auto;
    }
    #navigation a#pull {
        display: block;
        background-color: #ff6666;
        width: 100%;
        position: relative;
    }
    #navigation a#pull:after {
        content:"";
        background: url('images/nav-icon.png') no-repeat;
        width: 30px;
        height: 30px;
        display: inline-block;
        position: absolute;
        right: 15px;
        top: 10px;
    }
}
1
Georgina Beckett 4 Янв 2016 в 14:04

2 ответа

Лучший ответ

Пожалуйста, поместите код ниже внутри раздела заголовка

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
1
Prajwal Shrestha 4 Янв 2016 в 11:07

@media handheld устарел.

Вместо этого используйте:

@media only screen and (max-width: 600px) {

А также

@media only screen and (max-width: 480px) {
0
Rounin 4 Янв 2016 в 12:02