Viewport meta tag required when using vh/vw CSS units?

Viewed 191

I have designed a responsive website which uses vh and vw scales rather than pixel sizes throughout the CSS, including font-size properties. I know the site views perfectly fine on mobile/tablet screens as well as PCs and laptops as I have tested it out. Everything is readable with good character sizing and all elements (buttons etc. are sized and spaced well for good UX), and if needed, pinch zooming works too.

The issue I am having is that Google Search Console is saying that a viewport meta tag is needed.
Why would that be?

Looking here for previous Q&As on this subject, as pointed out in the highest upvoted answer, the issue with CSS Web page not responsive when using vh and vw was because there was no max-width property in the CSS

The answer from @Sheriffderek to Viewport meta tags vs Media Queries? pointed out that:

You'll want a metaviewport tag (always)

My CSS media queries are as so..

/*****************************************************
                        Apple iPhones
                Samsung Galaxy Mobile Phones
                        in Landscape
*****************************************************/

@media (-webkit-min-device-pixel-ratio: 1.1) and (orientation: landscape) {
}


/*****************************************************
                      Kindle Fire HDX,
                     iPad and iPad Pro
                       in Landscape
*****************************************************/

@media (-webkit-device-pixel-ratio: 2) and (min-width: 1000px) and (orientation: landscape) {
}


/****************************************************
                Tablets and Mobile Phones
                       in portrait
****************************************************/

@media (orientation: portrait) {
}


/****************************************************
                   Apple iPhones and
             Samsung Galaxy Mobile Phones
                      in portrait
****************************************************/

@media (-webkit-min-device-pixel-ratio: 1.1) and (orientation: portrait) {
}


/*****************************************************
                    Kindle Fire HDX,
                   iPad and iPad Pro
                      in Portrait
*****************************************************/

@media (-webkit-device-pixel-ratio: 2) and (orientation: portrait) {
}

What is the deal here? Do I really need a viewport meta tag if responsiveness is already taken care of? If so, why?

0 Answers
Related