'Vertical Media Queries Not Working (Resize Elements Based on Height of Screen) -- Viewport issue?

I'm working on a web application that's meant to be used exclusively on phones (of various sizes). The application includes various buttons that I resize based on the user's screen size so that we maximize the use of horizontal and vertical space.

I have specified a few media queries for responding to both the horizontal and vertical layout changes using tailwind (see below):

  screens: {
    'sm': '340px',
    'md': '360px',
    'lg': '385px',
    'xl': '640px',
    '2xl': '1024px',
    "tall": { 'raw': '(min-height: 740px)' },
    "vtall": { 'raw': '(min-height: 800px)' }
  }

These all work when looking at the display on my desktop with dev tools. The view is changing based on vertical and horizontal size changes.

The issue is when I use an actual mobile device, I notice that my application is consistently ignoring the vertical media queries.

I've isolated the issue to this line:

<meta name="viewport" content="width=device-width, initial-scale=1, height=device-height"></meta>

When I make my line...

<meta name="viewport" content="height=device-height"></meta>

The vertical media query works, but not the horizontal.

But the moment I add the width specification back in... the vertical media query doesn't work, but the horizontal one does.

Any ideas?

htmlcssresponsive-designtailwind-cssviewport


Solution 1:[1]

I'm not sure if it would make any difference, but you don't need to close the meta tag, what you want is

<meta name="viewport" content="width=device-width, initial-scale=1, height=device-height">

Can you start a codepen or jsfiddle that illustrates your problem?

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 David Taiaroa

Related Questions