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

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

来源

2017-02-28 MrHutnik

您似乎不了解元标记在HTML中的作用。对它们应用CSS规则不会改变它们的属性。 – BenM

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

至于你的第一个问题，没有看到你确切的问题，很难指出一个具体的解决方案。

纵向视图：

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

}

景观但是，如果这是主要是一个Android问题，以下媒体查询可以解决您的屏幕宽度的问题，而键盘的存在是有益的查看：

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

来源

2017-02-28 18:45:44 Mark

@MrHutnik你是否能够得到这个工作？ – Mark

你好，谢谢你的回答。我得到它的工作，因为这个问题只发生在移动Firefox上，并且固定比例尺（初始，最大和最小值）都有效。我想问的主要问题是如果元标记应该从css修改。 – MrHutnik

Meta标签并不意味着被Css类改变或影响。这与Meta标签的定义（https://www.w3schools.com/tags/tag_meta.asp）相反。

但是，如果你想解决你的问题，你可能会添加一个事件监听器使用JavaScript的主窗口和每当窗口的大小，它会改变视口的值。

来源

2017-02-28 18:27:28 AHBagheri

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

回答

相关问题