Как вставить метатег без использования jquery append?

Question

Я использовал следующий jquery, чтобы вставить метатег в HTML-документ.

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

Если возможно, я бы хотел добавить метатег без использования jquery. У кого-нибудь есть идеи, как я могу это сделать?

Полагаю, мне, вероятно, потребуется использовать document.getElementByTagName, но я не уверен, как.

На всякий случай, если вам интересно, я вставляю метатег в html, чтобы оптимизировать сайт для просмотра с помощью iphone. К сожалению, ширина = устройство-ширина не вариант, так как он не очень хорошо подходит для моей версии для iPad.

Answer 1

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

Answer 2

Вы также можете использовать «setAttribute» (а не нотацию «точка») для имен атрибутов weirdo (содержащих не буквенно-цифровые символы).

Пример:

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

В приведенном выше примере IE (<= 9) всегда использует режим последних стандартов документов.Иногда IE прибегает к более старым стандартам и поэтому ломает ваше современное веб-приложение javascript / canvas.</p>

Answer 3

Решение Javascript:

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

Answer 4

Вот решение, которое создает метатег, если он еще не существует:

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