Desktop version showing on safari mobile

[sordespilosus]

Hi all

I create issue, as well Nikolas asked me.

So, I download node.js, install it, install al packages, install plugin for Sublime, edit PATH. Its work ok, mjml file was create, and compiletd markup was output in html file.

Next, i get mjml code from you live preview (https://mjml.io/try-it-live/ryQglRCng), and paste in my mjml file, and do output in html. Open result on mobile device, and result page is not adaptive:

Page just scaling to fit on my mobile device.

But in your live preview page look like that:

What i do wrong? Why same code in your preview adaptive, but in my page is not?

Thank you for help and sorry for my english. I never learn it before.

[fusion27]

@sordespilosus let's see your MJML

[iRyusa]

Hi @sordespilosus !

Thanks for reporting this, it looks to be solved when adding a meta viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

We'll see if it break something on any clients/device to add this

[sordespilosus]

@iRyusa, yes, is it! Thanks!

i thought this meta added automatically, and dont cheked compiled html attentively )

now i continue research this))

[sordespilosus]

@iRyusa, if i manually paste meta name="viewport" in compiled html, and edited mjml source-file, framework delete this string in html after output. How can i fix, or patched this?

Thanks!

[iRyusa]

You can dirty patch it in the node_modules/mjml-core/lib/configs/defaultContainer.js and add the meta viewport.

[sordespilosus]

@iRyusa thanks!

Its release bug, or i install/configure something wrong?

[iRyusa]

It's a bug in current MJML version, should be fix in 3.3.1 👍

[sordespilosus]

@iRyusa, thanks! I'll be wait 3.3.1 release)

[ngarnier]

Hello,

Thanks for reporting @sordespilosus, it's now fixed (npm install mjml to update).