Medienabfragen für Smartphone Portrait, Landschaft und Desktop?

Question

Ich versuche, verschiedene Medienabfragen für Smartphone-Ausrichtung und Desktop zu setzen, ich möchte Portrait und Landschaft zielen. Ich bin mir bewusst, alle anderen Stapel Links so hat:

Media query to target most of smartphone 3 media queries for iphone portrait, landscape and ipad portrait

Aber ich habe immer noch Probleme, meine Landschaft ein nicht funktioniert, dann ist dies der Code Ich verwende:

Desktop css first 
    -- csss for desk -- 

Portrait: 

    @media only screen and (min-device-width: 320px) and (max-device-width: 479px) { 
    body { 
     padding: 0 !important; 
    } 
    .infoShowWrapper { 
     width: 268px; 
    } 
    .heroImage { 
     margin-top: 0; 
     height: 200px; 
     width: 100%; 
     background: #fff url(assets/images/hero_small.jpg) no-repeat center center; 
    } 
    .navbar-fixed-top { 
     margin: 0 !important; 
    } 
    .box-item { 
     width: 280px; 
    } 
    .seaBkg { 
     background-image: url(assets/images/mare_2x.jpg); 
    } 
} 

Landscape: 

    @media only screen and (min-device-width: 480px) and (max-device-width: 640px) { 
    body { 
     padding: 0 !important; 
    } 
    .heroImage { 
     margin-top: 0; 
     height: 200px; 
     width: 100%; 
     background: #fff url(assets/images/hero_small.jpg) no-repeat center center; 
    } 
    .navbar-fixed-top { 
     margin: 0 !important; 
    } 
    .box-item { 
     width: 440px; 
    } 
    .infoShowWrapper { 
     width: 440px; 
    } 
    .seaBkg { 
     background-image: url(assets/images/mare_2x.jpg); 
    } 
} 

Der Code Landschaft ist wie nicht einmal

Answer 1

Versuchen Hinzufügen

orientation : landscape 

@media only screen and (min-device-width: 480px) 
        and (max-device-width: 640px) 
        and (orientation: landscape) { 

//enter code here 
} 

012 in Betracht gezogen zu werden

Siehe this site oder this snippet als Referenz.