Are All Desktop/Laptop Monitor's Orientation Similar to Landscape Orientation on Devices Like the iPad

Are all desktop/laptop monitor's orientation similar to landscape orientation on devices like the iPad?

Are all Desktop/laptop Monitor's orientation similar to Landscape orientation on devices like iPad?

No they are not. The orientation is based on the width and height of the window.

Landscape Mode is when the window width is larger than window height.

Portrait Mode is when the window height is larger than window width.

You can see this using your example: http://jsfiddle.net/tw16/EaHhU/

Adjust the width of the results window to match the above scenarios and you will see the colour change.

Desktop Browser Support: Firefox 3.5+, Google Chrome 5+, Opera 10.6+, Safari 4+

Mobile Browser Support: Android 2+, iOS4, Mobile Firefox.

Media Query: Touch Only

Yes there is reason not to: orientation is unrelated to whether the device uses touch, it uses viewport width and height to esablish what the orientation is. (orientation: landscape) will apply when the viewport is wider than it is tall and (orientation: portrait) will apply when the viewport is taller than it is wide. So in effect, any browser on any device that supports media queries fully will utilise orientation.

Check out the jsfiddle form this stackoverflow answer and you'll see the orientation media query taking effect when you resize your browser window.

As an addendum, you should be aware of this quote from the modernizr docs:

The Modernizr.touch test only indicates if the browser supports touch
events, which does not necessarily reflect a touchscreen device. For
example, Palm Pre / WebOS (touch) phones do not support touch events
and thus fail this test. Additionally, Chrome (desktop) used to lie
about its support on this, but that has since been rectified.
Modernizr also tests for Multitouch Support via a media query, which
is how Firefox 4 exposes that for Windows 7 tablets.

From http://modernizr.com/docs/#features-misc

Having said that, it may still be suitable for what you're doing. That's up to you

Detect browser window orientation in CSS

You should use css media queries. Yes Roko is right in that css media queries are not longer experimental and supported by most browsers. See caniuse to see that support is prevalent.

On how to use, the css media query with orientation, its has already been answered here. Look for the jsfiddle.

body {
    /* some portrait css */
}

@media only screen and  (orientation : landscape) {
    /* some landscape css */
}

For more information on CSS media queries, see the documentation by mozilla.

Detect viewport orientation, if orientation is Portrait display alert message advising user of instructions

if(window.innerHeight > window.innerWidth){
    alert("Please use Landscape!");
}

jQuery Mobile has an event that handles the change of this property... if you want to warn if someone rotates later - orientationchange

Also, after some googling, check out window.orientation (which is I believe measured in degrees...)

EDIT: On mobile devices, if you open a keyboard then the above may fail, so can use screen.availHeight and screen.availWidth, which gives proper height and width even after the keyboard is opened.

if(screen.availHeight > screen.availWidth){
    alert("Please use Landscape!");
}

How to accurately detect if mobile phone via screen.availWidth (and not tablet, laptop etc)

With the innerWidth and innerHeight properties of the window you can calculate the width and height of your screen in pixels. On my 2560x1600 screen it returns the dimensions 1280x800, accounting for the device-pixel ratio.

function getWindowDimensions() {
  const width = window.innerWidth;
  const height = window.innerHeight;
  const ratio = (width / height) * 100;
  return { width, height, ratio };
}

const { width } = getWindowDimensions();

if (width < 768) {
    galleryImages = portraitImages;
} else {
    galleryImages = landscapeImages;
}

Also, instead of selecting your images in JavaScript you could also use the <picture> element and use the srcset attribute. With the <picture> element you can add media queries for showing images based on the condition in that query. This would give you the ability to add both your image sets to the HTML and the browser then decides which image to show based on your query.

<picture>
  <source media="(max-width: 767px)" srcset="portrait.jpg">
  <source media="(min-width: 768px)" srcset="landscape.jpg">
  <img src="landscape.jpg" alt="Your image description">
</picture>

I'd suggest that you create pairs for your images to add the to the picture element. For example in an array of objects with the keys portrait and landscape. Loop over the array and create a <picture> element for each of those pairs with the <source> tags specified to the media query and its corresponding srcset value.

const images = [
  {
    portrait: './portrait-image-1.jpg',
    landscape: './landscape-image-1.jpg'
  },
  {
    portrait: './portrait-image-2.jpg',
    landscape: './landscape-image-2.jpg'
  },
  {
    portrait: './portrait-image-3.jpg',
    landscape: './landscape-image-3.jpg'
  }
];

for (const { portrait, landscape } of images) {

  const picture = document.createElement('picture');
  const sourcePortrait = document.createElement('source');
  const sourceLandscape = document.createElement('source');
  const image = document.createElement('img');

  sourcePortrait.media = '(max-width: 767px)';
  sourcePortrait.srcset = portrait;
  sourceLandscape.media = '(min-width: 768px)';
  sourceLandscape.srcset = landscape;
  image.src = landscape;

  picture.append(sourcePortrait, sourceLandscape, image);
  document.body.append(picture);

}

Otherwise to detect the device that someone is using, like a mobile phone, then check the userAgent for keywords that are recognized as phones. For detecting devices this is good, but for responsive web development, not so much as many other devices and new browser could be added and could break in the future.

Differentiating portrait and landscape versions in media queries

We have to add orientation: portrait and orientation: landscape to your media screen.

iPad Landscape and Portrait

/* iPad Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {

/* ur CSS */
}

/* iPad Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

For latest iPads use pixel ratio:2 (Retina display) .

-webkit-min-device-pixel-ratio: 2

Similarly for iPhone's, for iPhone's you have to set media for 4 different screens , < iPhone 4S , iPhone 5S and iPhone 6 and 6 plus versions.

CSS media query height greater than width and vice versa (or how to imitate with JavaScript)

I'm sure you have it by now, but here is an example for others who pass by. Like the previous person said, people should take the time to read this: http://www.w3.org/TR/css3-mediaqueries/

Now, here is an answer. You can put "landscape" or "portrait" in conjunction with widths and heights in your @media rules. This assumes that height is greater than the width and vice versa. I usually only use min-width and then have a few separate @media rules for those specifically. One example would be landscape: horizontal scroll (desktop) and portrait: regular vertical (tablet/phone )

Those 2 wouldn't do it alone though, you'll need some combinations. I think we can assume your sidebar would be a hindrance on screens smaller than 600px wide.

/* 01 */
@media (min-width: 0) {
   /* this is the same as not using a media query... */
   .main-content {
     width: 100%;
     float: left;
   }

   .side-bar {
     width: 100%;
     float: left
   }

}

/* 2 */
@media (min-width: 600px) and (orientation:landscape) {

   .main-content {
     width: 70%;
     float: left;
   }

   .side-bar {
     width: 30%;
     float: left
   }

}

HERE is a jsfiddle - note that box-sizing: border-box; is used for padding issues.

2017 UPDATE

I think most people would use flexbox now: https://jsfiddle.net/sheriffderek/egxcgyyd/

.parent {
  display: flex;
  flex-direction: column;
}

@media (min-width: 600px) and (orientation:landscape) {
  .parent {
    flex-direction: row;
  }
  .child-1 {
    min-width: 260px; /* or flex-basis: xx - try them both */
  }
  .child-2 {
    flex-basis: 100%; /* "if at all possible... please try to be this size..." */
  }
}

Media Queries: How to target desktop, tablet, and mobile?

IMO these are the best breakpoints:

@media (min-width:320px)  { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }
@media (min-width:480px)  { /* smartphones, Android phones, landscape iPhone */ }
@media (min-width:600px)  { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }
@media (min-width:801px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

Edit: Refined to work better with 960 grids:

@media (min-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px)  { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px)  { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

In practice, many designers convert pixels to ems, largely because ems afford better zooming. At standard zoom 1em === 16px, multiply pixels by 1em/16px to get ems. For example, 320px === 20em.

In response to the comment, min-width is standard in "mobile-first" design, wherein you start by designing for your smallest screens, and then add ever-increasing media queries, working your way onto larger and larger screens.

Regardless of whether you prefer min-, max-, or combinations thereof, be cognizant of the order of your rules, keeping in mind that if multiple rules match the same element, the later rules will override the earlier rules.

---

Related Topics