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?