Query for all smartphones in portrait orientation

Question

What im trying to achieve is a media query that will work only on all smartphone on portrait orentation

I was using so far this one, but it isnt working in iPhone 5. Why is this?

@media only screen and (max-width:800px) and (orientation: portrait){
    aside{ display: none;}
}

try :: (max-width:568px) – Manann Sseth Mar 19 '13 at 11:34 — Manann Sseth, Mar 19 '13 at 11:34

score 0 · Answer 1 · answered Mar 19 '13 at 11:34

0

iPhone 5 display resolution is 1136 x 640 pixels. Measuring 4 inches diagonally, the new touch screen has an aspect ratio of 16:9 and is branded a Retina display with 326 ppi (pixels per inch).

Try:

@media only screen and (min-width: 560px) and (max-device-width: 1136px) {
   aside{ display: none;}
}

answered Mar 19 '13 at 11:34

Smartis has left SO again

5,025
4
31
45

Are you using a real iPhone or an Emulator? – Smartis has left SO again Mar 19 '13 at 11:54
And what shows the Homepage, that your iPhone's resolution is? My Sony has 640x360 in the Chrome Browser. – Smartis has left SO again Mar 19 '13 at 12:00

Amann Malik · Answer 2 · 2013-03-19T14:29:21.783

All mobile screens in portrait:

In CSS:

@media only screen and (max-device-aspect-ratio: 1) and (orientation: portrait) {
     aside{ display: none;}
}

Small mobile screens in portrait with explicitly set viewport width:

Declare this scaling mode in HTML <head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

In CSS:

@media only screen and (max-width: 479px) and (max-device-aspect-ratio: 1) and (orientation: portrait) {
     aside{ display: none;}
}

All mobile screens in portrait with default viewport width (980px):

Note: It has become standard practice in modern web design to define your viewport width instead of leaving it at the default 980px. It is integral to Responsive Design. I strongly suggest taking some time to learn about it.

In CSS:

@media only screen and (width: 980px) and (max-device-aspect-ratio: 1) and (orientation: portrait) {
     aside{ display: none;}
}

Adding the meta tag makes that my page looks weird on the iPhone5. It just fills half the width of the screen — Enrique Moreno Tent, Mar 19 '13 at 13:40
I updated the meta viewport tag to include initial scale, maybe that will make it look properly. Otherwise I added another solution below that you might be ok with — Amann Malik, Mar 19 '13 at 14:30

Query for all smartphones in portrait orientation

2 Answers2