Question

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

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类更改或影响。这与Meta标签的定义（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
  */
}

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

2 个答案: