Vuepress: Desktop view while on mobile browser

Created on 11 Sep 2020 · 7Comments · Source: vuejs/vuepress

[x] I confirm that this is an issue rather than a question.

Bug report

When using the Firefox browser on Android my Vuepress application does not look friendly. It looks exactly like the desktop version

Steps to reproduce

Visit Vuepress Website or visit your own generated Vuepress application (yarn create vuepress) via Firefox Mobile (it also affects Firefox Desktop with developer mobile view activated)

What is expected?

See a mobile view of the vuepress application, i.e. a mobile navigation with hamburger icon.

What is actually happening?

See the desktop view without a hamburger icon and all navigation links still visible. Also the content is very small on the sccreen.

Other relevant information

Mobile: Firefox 80.0.1 on Android
Desktop: Firefox 80.0 on Ubuntu

bug

Source

treagod

Most helpful comment

@billyyyyy3320

In the source code, the following meta tags are present:

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">

However, when the site is loaded they are removed.
If you "inspect" you will see that these 2 tags disappear.

I did the test here (Android + Firefox), and the site loads normally with the mobile layout, but after a few seconds it changes to the desktop version.

ktquez on 12 Sep 2020

👍2

All 7 comments

Tried to reproduce by using Browerstack.

It looks good on:

Firefox 80 on Win10(Windows), macOs Catalina(macOs), iPhone11(iOS), Samsung Galaxy S20 and Google Pixel 4(Android)

billyyyyy3320 on 12 Sep 2020

That's strange. I made a screenshot, don't know if that helps or if I can do anything else.

Screenshot_2020-09-12-10-35-04-784_org mozilla firefox

treagod on 12 Sep 2020

@billyyyyy3320

In the source code, the following meta tags are present:

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">

However, when the site is loaded they are removed.
If you "inspect" you will see that these 2 tags disappear.

I did the test here (Android + Firefox), and the site loads normally with the mobile layout, but after a few seconds it changes to the desktop version.

ktquez on 12 Sep 2020

👍2

Basically same issue here.

When I inspect the site on Firefox 82.1.3 on Android it rendered normally with the mobile layout on first load, then turned to desktop layout instantly.

For now, as @ktquez said, I add these two tags in docs/.vuepress/config.js same as injecting extra tags to <head> which can fix this temporarily.

However, these two tags also disappears after I try inspecting the site with latest Chrome on Android. So I guess that it's just new Firefox's (after Daylight update) default viewport setting that differs from Chrome which causes this issue.

When it comes to the disappearance of these two tags, I'm pretty sure its the problem VuePress has with its own since it also occurs on the clean site inited by npx create-vuepress-site.

amzrk2 on 24 Nov 2020

Found the cause of the problem:

In @vuepress/core/lib/client/root-mixins/updateMeta.js, it removes all meta nodes in head then injects newMetaTags.

https://github.com/vuejs/vuepress/blob/81cce3967c018fe005f112cbe950abc7457dbacb/packages/%40vuepress/core/lib/client/root-mixins/updateMeta.js#L85-L107

So these two meta nodes are removed by the filter since newMetaTags doesn't have them:

https://github.com/vuejs/vuepress/blob/81cce3967c018fe005f112cbe950abc7457dbacb/packages/%40vuepress/core/lib/client/index.dev.html#L4-L5

amzrk2 on 24 Nov 2020

BTW the <meta name="generator" content="VuePress 1.7.1"> is also removed just in case.
A long time has passed and there is still no fix? This issue reduces SEO.