可以在CSS文件中修改HTML META标签 [英] Can HTML META tag be modified in CSS file

问题描述

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

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 viewport meta tag. I figured a workaround where I fix the innitial-scale, maximum-scale and minimum-scale to one value which I calculate in JS. Is there a way to calculate this value and assign it in CSS? Can, and should I access meta tag from css? I've actually tried to do that but it didn't seem to work. Code below:

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;
}

推荐答案

第二个问题的答案是不，你不应该。但是，尝试了解视口标记与媒体查询之间的关系可能会更有用，您可以了解有关此处。另外，关于决定在开发过程中如何处理视口与媒体查询的方法，您可能会找到答案也很有帮助。

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.

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

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:

纵向视图：

@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标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！