detecting ipad orientation with meta tag as width=device-width

Question

I'm trying to get the orientation on ipad with meta tag width=device-width. But in that viewport the width of both views is 768px and top.orientation is 90. So i'm unable to detect the orientation with traditional methods. Is there any other way to know it ?

Answer 1

You can add media queries to your CSS to target the iPad orientation:

@media all and (device-width: 768px) and (device-height: 1024px)  
           and (orientation:portrait) {
  /* css for ipad portrait */
}
@media all and (device-width: 768px) and (device-height: 1024px)  
           and (orientation:landscape) {
  /*  css for ipad landscape */
}

For even more media queries targeting different devices you can check e.g. Detect different device platforms using CSS

As mentioned in the comments, the orientation should be detected using Javascript instead of CSS. Various suggestions for this can be found here: Detect iPad orientation change (which can also be used/called for page load) with e.g. the approach just to check if the innerHeight is greater than the innerWidth:

function isPortrait() {
   return window.innerHeight > window.innerWidth;
}

mentioned in this answer by Martynas.

Answer 2

I don't see how you can get the orientation from the width. But you can use css to specify rules for orientation

@media (min-width: 700px) and (orientation: landscape) { ... }