Kann HTML META-Tag in CSS-Datei geändert werden

Ich brauche einige Skalierung der Seite und verhindern, dass es schließt, wenn die Tastatur auf mobilen Geräten angezeigt wird. Auch sollte es auf einer Vielzahl von Bildschirmen funktionieren. Um dies zu tun, verwende ich Viewport-Meta-Tag. Ich habe mir einen Workaround ausgedacht, bei dem ich die Anfangs-, Maximal- und Minimalskala auf einen Wert festlege, den ich in JS berechne. Gibt es eine Möglichkeit, diesen Wert zu berechnen und in CSS zuzuweisen? Kann und sollte ich auf Meta-Tags von CSS zugreifen? Ich habe es tatsächlich versucht, aber es schien nicht zu funktionieren. Code unten:Kann HTML META-Tag in CSS-Datei geändert werden

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

Quelle

2017-02-28 MrHutnik

Sie scheinen die Rolle von Meta-Tags in HTML nicht zu verstehen. Die Anwendung von CSS-Regeln auf sie ändert ihre Attribute nicht. – BenM

Die Antwort auf Ihre zweite Frage ist Nein, sollten Sie nicht. Aber es wird wahrscheinlich hilfreicher für Sie sein, zu versuchen, die Beziehung zwischen dem Viewport-Tag und Medienabfragen zu verstehen, die Sie mehr über here erfahren können. Was die Entscheidung betrifft, wie Viewports im Vergleich zu Medienabfragen während der Entwicklung zu betrachten sind, können Sie auch these answers hilfreich finden.

Zu Ihrer ersten Frage, ohne Ihr genaues Problem zu sehen, ist es schwierig, auf eine bestimmte Lösung hinzuweisen. Wenn dies jedoch meist ein Android-Problem ist, können die folgenden Medien-Anfragen bei der Lösung Ihres Bildschirm-Breite Problem nützlich sein, während die Tastatur vorhanden ist:

Portrait Ansicht:

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

}

Landschaft view:

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

Quelle

2017-02-28 18:45:44 Mark

@MrHutnik konnten Sie das jemals funktionieren? – Mark

Hallo, danke für deine Antwort. Ich habe es zum Laufen gebracht, da das Problem nur bei mobilen Firefox aufgetreten ist, und Fixierungsskalen (Anfang, Maximum und Minimum) haben den Trick gemacht. Die Hauptfrage, die ich stellen wollte, war eigentlich, ob Meta-Tags von CSS geändert werden sollten. – MrHutnik

Meta-Tags sind nicht dazu gedacht, durch CSS-Klassen geändert oder beeinflusst werden. Dies steht im Gegensatz zur Definition von Meta-Tags (https://www.w3schools.com/tags/tag_meta.asp).

Wenn Sie jedoch Ihr Problem lösen möchten, fügen Sie dem Hauptfenster möglicherweise einen Ereignis-Listener mithilfe von JavaScript hinzu und ändern bei jeder Größenanpassung des Fensters den Wert des Ansichtsfensters.

Quelle

2017-02-28 18:27:28 AHBagheri

Kann HTML META-Tag in CSS-Datei geändert werden

Antwort

Verwandte Themen