Gewusst wie: einfügen von meta-Tag wird ohne die Verwendung von jquery append?

Ich habe folgende jquery einfügen einen meta-Tag in ein html-Dokument. 

<script type="text/javascript">
if(screen.width>=320 && screen.width<=767){
$('head').append('<meta id="viewport" name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">');}    
</script>

Wenn möglich, möchte ich zum einfügen der meta-Tag wird ohne die Verwendung von jquery. Jemand irgendwelche Ideen, wie ich das tun kann?

Ich glaube, dass werde ich wohl müssen, verwenden Sie document.getElementByTagName aber ich bin mir nicht sicher, wie.

Nur für den Fall Sie sich Wundern, ich bin das einfügen des meta-Tag in mein html zu optomize die Seite für die Anzeige mit dem iphone.
Leider, width=device-width ist keine option, da Sie nicht gut spielen mit meinem ipad-version.

  • Nur aus Neugier, sind Sie sicher, dass mobile Geräte ausführen von Javascript vor dem Check-out der Meta-tag?
  • Ich habe es getestet auf dem ipad und dem iphone und es funktioniert. Gute Frage aber. Ich bin mir nicht sicher über andere Geräte. Ich werde versuchen, android später.
  • Tatsächlich, ich nehme das zurück. Ich finde, dass das iphone nicht konsequent erfassen der meta-Tag (zumindest glaube ich, dass ist das problem). Manchmal funktioniert es und manchmal nicht. Ich denke, dass ich php verwenden und stattdessen nur Umleitung auf eine mobile Seite.
  • Ich bemerkte, dass Semikolons in der "Inhalt" attr falsch sind, sollte Kommas: "Breite=320, initial-scale=1, ..."
InformationsquelleAutor TryHarder | 2011-10-10
  1. 32
    var viewPortTag=document.createElement('meta');
viewPortTag.id="viewport";
viewPortTag.name = "viewport";
viewPortTag.content = "width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;";
document.getElementsByTagName('head')[0].appendChild(viewPortTag);
    • Das war der trick. Danke!
    InformationsquelleAutor Kai
  2. 6

    Können Sie auch mit "setAttribute" (anstatt der "dot" - notation) für weirdo-Attribut-Namen (mit nicht-alpha-numerische Zeichen).

    Beispiel:

    var iefix=document.createElement('meta');
iefix.setAttribute("http-equiv", "X-UA-Compatible");
iefix.setAttribute("content", "IE=Edge");
document.getElementsByTagName('head')[0].appendChild(iefix);

    Obigen Beispiel bewirkt, dass IE (<=9) verwenden Sie immer die aktuellste Dokument im standards-Modus. Manchmal IE zurückgreifen, um ältere standards, und brechen daher Ihre moderne javascript /canvas web-app.

    InformationsquelleAutor bob
  3. 4

    Javascript-Lösung:

    document.getElementsByTagName('head')[0].innerHTML += '<meta id="viewport" name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">';
    InformationsquelleAutor Jan Pfeifer
  4. 1

    Hier ist eine Lösung, die erstellt ein meta-tag, wenn es nicht bereits vorhanden ist:

    var viewport = document.querySelector('meta[name=viewport]');
var viewportContent = 'width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0';

if (viewport === null) {
  var head = document.getElementsByTagName('head')[0];
  viewport = document.createElement('meta');
  viewport.setAttribute('name', 'viewport');
  head.appendChild(viewport);
}

viewport.setAttribute('content', viewportContent);
    InformationsquelleAutor Benny Neugebauer
Schreibe einen Kommentar