Member Avatar for RikTelner

I want to make kinda responsive design, problem is, my website is picture based and if you hold mobile vertically you see 2 giant bars above and below it. If you turn your mobile sideways I might just be able to find method to put it nicely together. SO, finally, the question, is there a way to detect whether mobile is being sideways? Or at least aspect ratio, if width would be bigger, it would mean it's sideways, if height would be bigger, it would mean it's "standing".

  • 3 Contributors
  • 2 Replies
  • 182 Views
  • 3 Weeks Discussion Span
  • Latest Post Latest Post by gentlemedia

Dani AI

Generated

Short answer: use CSS for layout and only use JS to detect orientation for behavior that CSS cannot handle. is right to steer you toward responsive breakpoints, and is right that there is an orientation media query (note the correct spelling is portrait, not potrait). For a picture-heavy site the real win is making images fill their area instead of showing letterbox bars.

Make images behave like backgrounds (crop, don’t letterbox) with object-fit or background-size: cover and an explicit container aspect. That keeps a clean full-bleed look whether the device is tall or wide, at the cost of cropping part of the photo (use object-position or server-side focal crops if the subject must stay visible).

Example CSS pattern (use as a starting point):

.photo-wrap {
  width: 100%;
  height: 60vh; /* or use the --vh trick below for mobile */
  overflow: hidden;
}
.photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

If you need runtime detection (for dynamic swapping of assets, JS-only UI, or logging), prefer feature-supported APIs and fallbacks:

function isLandscape() {
  if (screen.orientation && screen.orientation.type) {
    return screen.orientation.type.indexOf('landscape') === 0;
  }
  if (window.matchMedia) {
    return window.matchMedia('(orientation: landscape)').matches;
  }
  return window.innerWidth > window.innerHeight;
}

Notes and gotchas: 100vh can be flaky on mobile chrome due to the address bar — use a JS-set --vh variable if you need true viewport height. Test on real devices (emulators can lie), and avoid relying on JS-only detection for core layout — CSS-first is more robust and performant.

Recommended Answers

All 2 Replies

Member Avatar for mattster

Most of the time you would use CSS breakpoints.
For instance:

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
    /* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
    /* Styles */
}

To organise things responsively, you need to look at a grid system. Lets say you have two images next to each other, and when you resize to below 320px (portrait mobile) you want the images to be next to each other.

Heres a jsFiddle demo. It's stupidly basic, and if you want to build an entire site on it, look at Bootstrap or PureCSS grids. These projects are fully developed and will handle anything you ever wanted... perfectly.

Member Avatar for gentlemedia

There are specific CSS media queries to handle these situations.

@media all and (orientation:landscape) {

    /* landscape styles in here */

}


@media all and (orientation:potrait) {

    /* portrait styles in here */

}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.