Making Devices on Portrait Orientation Behave like Mobile

How many times it has happened that a website looks perfect on landscape but gets screwed up in portrait, this happens since some tablets return static width, that is they will continue to return the same width in both landscape and portrait orientation, while some tablets return the width according to their orientation. I will explain this with a real example, iPad (all three) will return 768px as their width in both landscape and portrait orientation, although it should return 1024px in landscape mode, now what happens is, the website works well in landscape mode, however, in portrait orientation, the screen’s viewport becomes much smaller and the most irking part is, the same default list of styles will contine to be applied to it (because of it returning the same width), and as a result the whole website becomes a clutter, while PlayBook returns 1024px as width in landscape orientation and 600px in portrait orientation, so as soon as you tilt it, you can see the phone specific media query gets applied, to fix this, we can rewrite our phone specific media query like below, what it does is checks iPad’s orientation and applies the same specific styles as those of smartphones if the iPad is in portrait orientation.

Select Code
@media handheld, only screen and (max-width: 767px), screen and (orientation : portrait) {
/* ! All phone and tablets(in portrait orientation) specific CSS goes here   */
}

2,630 thoughts on “Making Devices on Portrait Orientation Behave like Mobile

  1. Pingback: hrwta.org
  2. Pingback: read full article
  3. Pingback: aqui
  4. Pingback: Sprawdz sam
  5. Pingback: transportation
  6. Pingback: europe-plus.org
  7. Pingback: izmir masaj
  8. Pingback: longwindows.net
  9. Pingback: UND Aerospace
  10. Pingback: miami escorts
  11. Pingback: Zobacz
  12. Pingback: curioser.org

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>