Passing attributes to viewport via CSS

Question

What are the attribute models that we can pass to the viewport through CSS?

Taking an example of the attribute content meta tag <viewport></viewport>: user-scalable=no, how I would introduce this in the model below, for example:

@viewport{
    zoom: 1.0;
    width: device-width;
}

I read this here, but I didn’t quite understand how I should use this.

Answer 1

I know it’s not exactly the answer you wanted, but perhaps precisely because it is deprecated is that it is not possible to apply attributes such as user-scalable=no since there is no more support or updates for this at rule

But you can use the min-zoom and max-zoom to try to limit the scale, ex:

@viewport {
  zoom: 1;
  min-zoom: 100%;
  max-zoom: 100%;
}

Be aware that:

This feature is no longer recommended. Although some browsers may still support it, it may have already been removed from the relevant web standards, may be in the process of deletion or may be maintained only for compatibility purposes. Avoid using it and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may stop working at any time.

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/@viewport

In addition, the <meta name="viewport"> will do the override of @viewport, then if you are trying to overwrite via CSS something that is in the meta viewport HTML you will not get.