Adding meta tags through Elm

664 views
Skip to first unread message

Adam Kowalski

unread,
Jun 21, 2015, 1:17:28 AM6/21/15
to elm-d...@googlegroups.com
I would like to add a tag using Elm rather then placing it into an index.html file for example.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Ideally I would be able to have this as part of a library I am working on, so that I can easily make my projects work regardless of the size of the device that my users are viewing the content with.  Then I believe I would be able to start making something akin a media query, by using the window dimensions and then having a conditionally executed function based on whether or not the screen width is a certain dimension.

I feel like I am missing something really obvious but I just can't figure it out.  Can somebody point me in the right direction?

Aaron VonderHaar

unread,
Jun 22, 2015, 1:57:32 AM6/22/15
to elm-d...@googlegroups.com
Will the <meta> tag work if it's dynamically added to the body after
the initial page render? If so, then you could just insert it into
your view function...

import Html
import Html.Attributes as Html

main =
Html.div []
[ Html.meta [ Html.name "viewport", Html.content "..." ] []
, ...
]
> --
> You received this message because you are subscribed to the Google Groups
> "Elm Discuss" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to elm-discuss...@googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.

Adam Kowalski

unread,
Jun 25, 2015, 4:32:15 AM6/25/15
to elm-d...@googlegroups.com
For some reason I am not able to set the meta property.  Is it part of the Elm-Html library?  I'm not seeing it there and I am getting a compile error.

Adam Kowalski

unread,
Jun 25, 2015, 4:43:15 AM6/25/15
to elm-d...@googlegroups.com
You are a genius!  I was able to do this using.

node "meta" [ name "viewport", content "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" ] []

This is going to change things!  Elm is now able to make mobile a first class citizen.

Corey Trampe

unread,
Jun 25, 2015, 9:18:06 AM6/25/15
to elm-d...@googlegroups.com
Attaching it to the body works?

( I wonder how consistently it will work among browser implementations... )



--

Adam Kowalski

unread,
Jun 25, 2015, 12:39:52 PM6/25/15
to elm-d...@googlegroups.com, corey...@gmail.com
I have not tested it extensively so I can't answer your question yet.  However, from my limited testing on two android devices it seems to at least work on mobile chrome.

Once I work with this a little longer I can tell you any quirks I have found.

As far as adding other meta tags, I tried changing the color of url bar in mobile chrome and that didn't work.  It seems pretty hit or miss.
Reply all
Reply to author
Forward
0 new messages