точки останова в Iphone 6+

Question

У меня возникли проблемы с моей чувствительной сеткой. Скорее всего, это связано с моими очками. Чтобы проверить, работают ли точки останова в браузере Blisk, я начал с того, что просто установил цвет шрифта, поэтому я увижу, что меняется.

Причина, по которой я устанавливаю первый на 414 px, заключается в том, что он работает на всех мобильных телефонах, кроме Iphone 6+ и Nexus 6. Но эти точки останова не работают. Заголовок-текст не меняет цвет.

Я делаю что-то неправильно здесь?

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

    .header-box { 
    background-color: #163A4E; 
    height: 550px; 
    margin-bottom: 0px; 
    padding: 0px; 
    } 

    .header-text h1 { 
     color:red; 
    } 

    .header-text h2 { 
     color:green; 
    } 
} 

/* Iphone 6 + and Nexus 6*/ 
@media only screen and (min-device-width : 415px) and (max-device-width : 736px) and (orientation : portrait) { 
     .header-text h1 { 
     color:yellow; 
    } 

    .header-text h2 { 
     color:pink; 
    } 

} 

Answer 1

Ну, во-первых у вас есть max-device-width, но это должно быть max-width так device-width is deprecated

Кроме того, не используйте orientation так it is not working (пока).

Ваш CSS будет выглядеть следующим образом:

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

    .header-box { 
    background-color: #163A4E; 
    height: 550px; 
    margin-bottom: 0px; 
    padding: 0px; 
    } 

    .header-text h1 { 
     color:red; 
    } 

    .header-text h2 { 
     color:green; 
    } 
} 

/* Iphone 6 + and Nexus 6*/ 
@media only screen and (min-width : 415px) and (max-width : 736px) { 
     .header-text h1 { 
     color:yellow; 
    } 

    .header-text h2 { 
     color:pink; 
    } 

}