Skip to content

Desktop view while on mobile browser #2607

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
1 task done
treagod opened this issue Sep 11, 2020 · 7 comments
Open
1 task done

Desktop view while on mobile browser #2607

treagod opened this issue Sep 11, 2020 · 7 comments
Labels
type: bug Something isn't working

Comments

@treagod
Copy link

treagod commented Sep 11, 2020

  • 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
@billyyyyy3320 billyyyyy3320 added the type: bug Something isn't working label Sep 12, 2020
@billyyyyy3320
Copy link
Collaborator

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)

@treagod
Copy link
Author

treagod commented Sep 12, 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

@ktquez
Copy link

ktquez commented Sep 12, 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.

@b-m-f b-m-f mentioned this issue Oct 19, 2020
Open
@dsrkafuu
Copy link

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
Copy link

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.

vuepress/packages/@vuepress/core/lib/client/root-mixins/updateMeta.js

Lines 85 to 107 in 81cce39

/**
* Replace currentMetaTags with newMetaTags
* @param {Array<Object>} newMetaTags
* @param {Array<HTMLElement>} currentMetaTags
* @returns {Array<HTMLElement>}
*/
function updateMetaTags (newMetaTags, currentMetaTags) {
if (currentMetaTags) {
[...currentMetaTags]
.filter(c => c.parentNode === document.head)
.forEach(c => document.head.removeChild(c))
}
if (newMetaTags) {
return newMetaTags.map(m => {
const tag = document.createElement('meta')
Object.keys(m).forEach(key => {
tag.setAttribute(key, m[key])
})
document.head.appendChild(tag)
return tag
})
}
}

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

vuepress/packages/@vuepress/core/lib/client/index.dev.html

Lines 4 to 5 in 81cce39

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

@xr0master
Copy link
Contributor

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.

@xr0master xr0master mentioned this issue Dec 10, 2020
Open
18 tasks
@myuki
Copy link

myuki commented Dec 13, 2020

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

@myuki myuki mentioned this issue Dec 13, 2020
Closed
1 task
@Aloso Aloso mentioned this issue Dec 20, 2020
Closed
@GreenImp GreenImp mentioned this issue Nov 27, 2021
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
type: bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@treagod @ktquez @xr0master @dsrkafuu @myuki @billyyyyy3320