可以在 CSS 文件中修改 HTML META 标签吗

Question

我需要对页面进行一些缩放，并防止它在移动设备上显示键盘时关闭。它也应该适用于各种屏幕。为此，我使用视口元标记。我想出了一种解决方法，将初始比例、最大比例和最小比例固定为我在 JS 中计算的一个值。有没有办法计算这个值并在 CSS 中分配它？我可以并且应该从 css 访问元标记吗？我实际上已经尝试过这样做，但似乎没有用。代码如下：

JS：

if (screen.width<1024){
    var a = screen.width/window.innerWidth;
    var txt = "width=device-width, user-scalable=0, maximum-scale=" + a + ", minimum-scale=" + a;
    document.getElementById("viewportMetaData").setAttribute("content", txt);

}

HTML：

<meta name="viewport" id="viewportMetaData" content="user-scalable=0">

CSS：

@media all and (max-width: 1024px) and (orientation: landscape) {
   @viewport {
   min-zoom: width/(100*vw);
   max-zoom: width/(100*vw);
   user-zoom: 0;
}

Answer 1

元标记并不意味着被 Css 类改变或影响。这与元标记的定义（https://www.w3schools.com/tags/tag_meta.asp）形成对比。

但是，如果您想解决您的问题，您可能会使用 javascript 向主窗口添加一个事件侦听器，并且每当调整窗口大小时，它都会更改视口值。

Answer 2

第二个问题的答案是否定的，你不应该。但是尝试了解视口标签和媒体查询之间的关系可能对您更有用，您可以了解更多关于here 的信息。此外，关于在开发过程中决定如何处理视口和媒体查询，您可能会发现these answers 也很有帮助。

关于您的第一个问题，如果没有看到您的确切问题，很难指出具体的解决方案。但是，如果这主要是 Android 问题，则以下媒体查询可能有助于解决存在键盘时的屏幕宽度问题：

纵向视图：

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

}

风景：

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