Target Mobile Landscape viewport

[fabianwurk]

Anyone know the best way to deal with Mobile Landscape viewport in Tailwind eg. how to target it specifically?

[Natetronn]

I think you'll want to look into Media Queries' Orientation.

And then check out Custom Media Queries in Tailwind, which, ironically, is showing one how to target portrait orientation.

[damacs]

Thanks @Natetronn, I will check them out 👍

[sfinktah]

Following said instructions, I created these custom screen sizes for tailwind.config.js. Note I made the values a little higher than what seems to be standard cell phone dimensions, which are creeping up near 400 and 900 pixels.

You can double down on the media/breakpoints using stacked prefixes, eg: class="wide:landscape:w-64"

edit: as I have commented, landscape/portrait will trigger on a desktop display if the browser window is resized to be taller than it is wide (or the opposite). I have added two extra breakpoints to my original post, "tallOrWideAndLandscape" and "tallOrWideAndPortrait". You could reasonably rename this "mobileLandscape" and "mobilePortrait".

module.exports = {
  theme: {
    extend: {
      screens: {
        'tall': {
          'raw': `only screen and (max-height: 960px) and (max-width: 480px)`
        },
        'wide': {
          'raw': `only screen and (max-height: 480px) and (max-width: 960px)`
        },
        'portrait': {
          'raw': '(orientation: portrait)'
        },
        'landscape': {
          'raw': '(orientation: landscape)'
        },
        'tallOrWideAndPortrait': {
          'raw': `only screen and ((max-height: 960px) and (max-width: 480px) or (max-height: 480px) and (max-width: 960px)) and (orientation: portrait)`
        },
        'tallOrWideAndLandscape': {
          'raw': `only screen and ((max-height: 960px) and (max-width: 480px) or (max-height: 480px) and (max-width: 960px)) and (orientation: landscape)`
        },
}}}};

And tested them with this:

<div class="invisible badge badge-primary xl:visible">XL</div>
<div class="invisible badge badge-primary 2xl:visible">2XL</div>
<div class="invisible badge badge-primary md:visible">MD</div>
<div class="invisible badge badge-primary sm:visible">SM</div>
<div class="invisible badge badge-primary lg:visible">LG</div>
<div class="invisible badge badge-primary tall:visible">TALL</div>
<div class="invisible badge badge-primary wide:visible">WIDE</div>
<div class="invisible badge badge-primary portrait:visible">PORTRAIT</div>
<div class="invisible badge badge-primary landscape:visible">LANDSCAPE</div>

My iPhone 10XS shows as TALL PORTRAIT, or SM WIDE LANDSCAPE, depending on orientation.

My 1920x1080 standard desktop (Chrome) shows LANDSCAPE on screen, and PORTRAIT during print.

[sfinktah]

I must append (for completeness) that I later discovered that Chrome on my Windows desktop changes between portrait and landscape media based simply on the width to height ratio of the browser window.

[jackblackCH]

What's the nicest way to target a certain viewport but only in landscape? Do I have to create that specific media query in the config?.. or can it be combined? E.g .xl-landscape:mt-4?

[permanyer]

as of tailwind 3.0 you can use

portrait:hidden
landscape:hidden

[mailtijmen]

Perhaps solve this by adding a custom breakpoint like below. The use of landscape: isn't really helpful because it triggers based on the ratio alone (and thus applying to all monitors as indicated by @sfinktah above. While the concern is likely with the use of mobile devices in landscape mode that then have limited height.

(I have added an additional s to landscapeS in the below to make a custom additional breakpoint. You can probably also amend the existing one but I do not know how yet.)

theme: {
        extend: {
              screens: {
                'landscapes': {
                    'raw': `only screen and (max-height: 600px) and (orientation: landscape)`
                }
            }
        }
    },

[sfinktah]

@mailtijmen Yes, I agree with me there. Though I might use this for a solution instead:

        'tallOrWideAndPortrait': {
          'raw': `only screen and ((max-height: 960px) and (max-width: 480px) or (max-height: 480px) and (max-width: 960px)) and (orientation: portrait)`
        },
        'tallOrWideAndLandscape': {
          'raw': `only screen and ((max-height: 960px) and (max-width: 480px) or (max-height: 480px) and (max-width: 960px)) and (orientation: landscape)`
        },

[ThomasStock]

This is a syntax example of how to do it in Tailwind 4 css files:

@custom-variant mobilePortrait {
  @media only screen and ((
 ((max-height: 990px) and (max-width: 560px)) or
              ((max-height: 560px) and (max-width: 990px))
          )
          and (orientation: portrait)) {
    @slot;
  }
}

@custom-variant mobileLandscape {
  @media only screen and ((
 ((max-height: 990px) and (max-width: 560px)) or
              ((max-height: 560px) and (max-width: 990px))
          )
          and (orientation: landscape)) {
    @slot;
  }
}

[ThomasStock]

I test with:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
    <link rel="stylesheet" href="/src/index.css" />
  </head>
  <body>
    <div class="">
      <div class="invisible xl:visible">XL</div>
      <div class="invisible 2xl:visible">2XL</div>
      <div class="invisible md:visible">MD</div>
      <div class="invisible sm:visible">SM</div>
      <div class="invisible lg:visible">LG</div>
      <div class="invisible portrait:visible">PORTRAIT</div>
      <div class="invisible landscape:visible">LANDSCAPE</div>
      <div class="invisible mobilePortrait:visible">MOBILE PORTRAIT</div>
      <div class="invisible mobileLandscape:visible">MOBILE LANDSCAPE</div>
    </div>
  </body>
</html>