Höhe Media Queries nicht richtig auf dem iPhone 6 mit Safari arbeiten

Question

Ich habe die folgenden Medien-Anfragen, die in iPhone und Android in einem Webview funktionieren soll:

@media (max-height: 275px) { 
    .logo { 
    display: none; 
    } 
} 

@media (max-height: 365px) { 
    .default-title { 
     display: none; 
    } 
} 

@media (max-height: 450px) { 
    .logo { 
     padding-top: 1rem; 
    } 
} 

@media (max-height: 315px) { 
    .logo { 
     padding-top: 0; 
    } 
} 

Grundsätzlich soll es Elemente schrumpfen/verschwinden Arbeitsplatzhöhe verringert sich.

Es funktioniert sehr gut auf Android-Geräten, wird aber auf meinem iPhone 6 komplett ignoriert. Es ist so, als wäre Safari völlig unbekannt, dass die Tastatur geöffnet ist. Wenn das der Fall ist, dann habe ich drei Fragen:

1. Wie die Tastaturöffnung erkennen/Schließen
2. Es ist möglich, diese Medien-Anfragen für Android und iPhone funktionieren?
3. Hat das etwas mit dem Retina-Display des iPhone 6 zu tun?

Answer 1

Reorder Ihre Medien-Anfragen bilden max min:

helfen

@media (max-height: 450px) { 
    .logo { 
     padding-top: 1rem; 
    } 
} 

@media (max-height: 365px) { 
    .default-title { 
     display: none; 
    } 
} 

@media (max-height: 315px) { 
    .logo { 
     padding-top: 0; 
    } 
} 

@media (max-height: 275px) { 
    .logo { 
     display: none; 
    } 
}