Vuepress: Layout can‘t adjust for mobile view in Firefox

Created on 4 May 2020 · 9Comments · Source: vuejs/vuepress

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

Bug report

Layout can‘t adjust for mobile view in Android Firefox Preview (org.mozilla.fenix, Version Code: 21082025) and Firefox Desktop. This problem occurs at v1.4.1 and v1.5.0. But at v1.4.0 it didn't exist.

Steps to reproduce

Firefox Preview:

Open website in Android Firefox Preview. I'm sure desktop mode is disabled. Unfortunately, I can't reproduce in Firefox (Android) (org.mozilla.firefox) and Chrome (Android).

Firefox Desktop:

Switch Firefox Desktop to Responsive Design Mode. Open website in Firefox Desktop.
Or open website in Firefox Desktop. Switch Firefox Desktop to Responsive Design Mode and change the window size by change device.

What is expected?

Layout auto adjust for mobile view.

What is actually happening?

Layout can‘t adjust for mobile view and keep desktop view.

Firefox Preview:

Screenshot_20200512-192422_Firefox Preview

Firefox Desktop (Responsive Design Mode):

Reproduction

In Firefox Desktop(Responsive Design Mode) it has some difference. Change the window size by directly drag the frame, it will normally adjust for mobile view. But if change the window size by change device, problem will occurs again.

References:

ipfs/ipfs-docs#304

Source

Myuki

👍1

Most helpful comment

Chrome behavior here is not spec compliant. Removing the meta viewport tag should display the desktop site.

kbrosnan on 7 Jul 2020

👍5

All 9 comments

I find it also can be reproduced in Firefox Desktop in Responsive Design Mode. It only occurs in specific status.

Myuki on 12 May 2020

I believe this error belongs to firefox bro.

Vuepress is using @media () {} in css for different layouts(nothing related to js), MDN shows that it's support by fixfox (obviously, too).

Mister-Hope on 15 May 2020

It seems that vuepress remove <meta name="viewport" content="width=device-width,initial-scale=1"> in client JavaScript.
https://github.com/vuejs/vuepress/blob/master/packages/@vuepress/core/lib/client/root-mixins/updateMeta.js
I think preserving <meta name="viewport" content="width=device-width,initial-scale=1"> will fix this issue.

takenspc on 13 Jun 2020

It seems that vuepress remove <meta name="viewport" content="width=device-width,initial-scale=1"> in client JavaScript.
https://github.com/vuejs/vuepress/blob/master/packages/@vuepress/core/lib/client/root-mixins/updateMeta.js
I think preserving <meta name="viewport" content="width=device-width,initial-scale=1"> will fix this issue.

<meta name="viewport" content="width=device-width,initial-scale=1"> should be the browser's default behaviour.

Mister-Hope on 13 Jun 2020

<meta name="viewport" content="width=device-width,initial-scale=1"> should be the browser's default behaviour.

I totally agree that <meta name="viewport" content="width=device-width, initial-scale=1"> SHOULD be the default though it isn't. If it was true, we don’t need specify <meta name="viewport" content="width=device-width, initial-scale=1"> in HTML templates (index.dev.html and index.ssr.html ) at all but we do.

Though I'm not a big fun of boilerplates such as <!DOCTYPE html>, <meta charset="utf-8">, <meta name="viewport" content="width=device-width, initial-scale=1">, we can't omit them.

https://hsivonen.fi/utf-8-detection/

In this regard, <meta charset=utf-8> is just like <!DOCTYPE html> and <meta name="viewport" content="width=device-width, initial-scale=1">. Everyone wants newly-authored content to use UTF-8, the No-Quirks Mode (better known as the Standards Mode), and to work well on small screens. Yet, every single newly-authored HTML document has to explicitly opt in to all three, since it isn’t realistic to get all legacy pages to opt out.

While I understand that it is far from ideal, please preserve boilerplates in production content.

takenspc on 13 Jun 2020

Sorry but I'm new to Vuepress and I'm a bit confused here. How can we prevent this behavior? Should I add my own HTML templates?

Sixteenleft on 5 Jul 2020

Chrome behavior here is not spec compliant. Removing the meta viewport tag should display the desktop site.

kbrosnan on 7 Jul 2020

👍5

This issue was originally reported in https://github.com/vuejs/vuepress/issues/2332 and there is a PR fixing it https://github.com/vuejs/vuepress/pull/2333, however the PR wasn't merged yet.
Maybe @sakihet or @ludanxer could give some context on this

ksy36 on 7 Jul 2020

Just a quick mention here, if you wanna have a workaround for now without touching any code in Vuepress, simply add a
line in the head section of config.js to fix it.
e.g. https://github.com/DIYgod/RSSHub/blob/e0d4d93d3305c5b806715444c3300a1f37fc50d5/docs/.vuepress/config.js#L61

https://github.com/vuejs/vuepress/issues/2359
https://github.com/DIYgod/RSSHub/issues/4633