search

vuejs / vuepress

📝 Minimalistic Vue-powered static site generator
https://vuepress.vuejs.org
MIT License
22.57k stars 4.76k forks source link

Desktop view while on mobile browser #2607

Open treagod opened 4 years ago

treagod commented 4 years ago

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

billyyyyy3320 commented 4 years ago

Tried to reproduce by using Browerstack.

It looks good on:

treagod commented 4 years ago

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

ktquez commented 4 years ago

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

dsrkafuu commented 3 years ago

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.

dsrkafuu commented 3 years ago

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

xr0master commented 3 years ago

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.

myuki commented 3 years ago

I early reported this issue in #2369 PR #2333 try to fix it, but it doesn't been merged and keep open