Can HTML META Tag Be Modified In CSS File

I need to do some scaling of the page and prevent it from closing in when keyboard shows up on mobile devices. Also it should work on a wide range of screens. To do so I use viewpo

Solution 1:

Meta tags are not meant to be changed or affected by Css Classes. That is in contrast with the definition of Meta tags (https://www.w3schools.com/tags/tag_meta.asp).

However, if you want to solve your issue, you may be adding an event listener to the main window using javascript and whenever the window is resized, it changes the viewport value.

Solution 2:

The answer to your second question is no, you shouldn't. But it will probably be more useful for you to try understanding the relationship between the viewport tag and media queries, which you can learn more about here. Also, as to deciding how to approach viewports vs. media queries during development, you may find these answers helpful as well.

As to your first question, without seeing your exact issue, it's hard to point to a specific solution. However, if this is mostly an Android issue, the following media queries may be useful in resolving your screen-width issue while the keyboard is present:

Portrait view:

@media screen and (max-aspect-ratio: 13/9) { 
/*
focus on element styles in portrait view, not meta tags
*/

}

Landscape view:

@media screen and (min-aspect-ratio: 13/9) { 
  /* 
  focus on element styles in landscape view, not meta tags
  */
}