0 votes
by (490 points)

I'm having problems with responsive CSS and I read the advice of putting some meta information inside <head>.

How would you do that in Snowman? I have tried this, but it doesn't work:

<%    $('head').append('<meta name="viewport" content="width=device-width, initial-scale=1.0" />'); %>


1 Answer

0 votes
by (154k points)
selected by
Best answer

You can appead content to the head element by placing the relevant code within your project's Story Javascript area, the following example demostrates two lines that produce the same result.

$(document.head).append('<meta name="viewport" content="width=device-width, initial-scale=1.0" />');


$('head').append('<meta name="viewport" content="width=device-width, initial-scale=1.0" />');

... however due to a potential timing issue doing the above may not produce the result you desire because web-browser commonly only read the information within the head element when the HTML file is first loaded.

You are relying on Snowman's built-in JavaScript engine to append the relevant viewport meta element when it starts up, and unfortunately that will likely occur after the web-browser has initially processed the head element content so that viewport meta data will likely be ignored.

The best way to insure that that viewport meta data is used is to manually edit your story HTML file and added it to the head element, after you have created the story HTML file using the Publish to File option. You will need to redo this manual editing each time you create a new story HTML file.

by (490 points)

Shit. I didn't even think of writing it by hand. Solved it now, thanks!