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"

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)'
}}}},

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)`
                }
            }
        }
    },