How to insert metatag without using jquery append?

Question

I used the following jquery to insert a metatag into a html document.

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

If possible, I'd like to insert the metatag without using jquery. Anyone have any ideas how I can do that?

I believe I will probably need to use document.getElementByTagName but I'm not sure how.

Just in case you are wondering, I am inserting the metatag into my html to to optomize the site for viewing with the iphone. Unfortunately, width=device-width is not an option as it doesn't play well with my ipad version.

Just out of curiosity, are you sure mobile devices run your Javascript before checking out the Meta tag? — Bart Vangeneugden, Oct 10 '11 at 10:31
I've tested it on the ipad and the iphone and it works. Good question though. I'm not sure about any other devices. I will try android later. — TryHarder, Oct 10 '11 at 10:48
Actually, I take that back. I'm finding that the iphone is not consistently detecting the metatag (At least I think that is the problem). Sometimes it works sometimes it doesn't. I think that I will use php instead and just redirect to a mobile specific page. — TryHarder, Oct 11 '11 at 07:50
I noticed that semicolons in the "content" attr are wrong, should be commas: "width=320, initial-scale=1, ..." — amartynov, Nov 29 '12 at 09:25

score 36 · Accepted Answer · edited Dec 11 '19 at 20:13

36

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

edited Dec 11 '19 at 20:13

Robert Guidry

3
2

answered Oct 10 '11 at 10:31

Kai

2,967
1
22
28

score 6 · Answer 2 · answered Sep 29 '12 at 23:40

You can also use "setAttribute" (rather than the "dot" notation) for weirdo attribute names (that contain non-alpha-numeric characters).

Example:

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

The example above causes IE (<=9) to always use the latest document standards mode. Sometimes IE will fall back to older standards, and therefore break your modern javascript / canvas web app.

score 6 · Answer 3 · answered Oct 10 '11 at 10:29

6

Javascript solution:

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

answered Oct 10 '11 at 10:29

Jan Pfeifer

2,854
25
35

score 1 · Answer 4 · answered Oct 22 '13 at 15:34

Here is a solution that creates a meta tag, if it does not already exist:

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

How to insert metatag without using jquery append?

4 Answers4

Linked