可以在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標籤

回答

相關問題