media query per smartphone verticale, orizzontale e desktop?

Question

Sto provando a impostare diverse query multimediali per l'orientamento dello smartphone e il desktop, voglio scegliere come target portrait e landscape. Sono a conoscenza di tutti gli altri collegamenti di stack tale ha:

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

Ma sto ancora avendo problemi, il mio paesaggio uno non funziona, questo è il codice che sto usando:

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); 
    } 
} 

Il codice paesaggio è come nemmeno farsi considerato

Answer 1

Prova ad aggiungere

orientation : landscape 

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

//enter code here 
} 

Vedere this site o this snippet come riferimento.