Skip to content
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

Layout can‘t adjust for mobile view in Firefox #2369

Open
1 task done
myuki opened this issue May 4, 2020 · 9 comments
Open
1 task done

Layout can‘t adjust for mobile view in Firefox #2369

myuki opened this issue May 4, 2020 · 9 comments

Comments

@myuki
Copy link

myuki commented May 4, 2020 •
edited
Loading

  • 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:
@myuki myuki closed this as completed May 4, 2020
@myuki myuki changed the title Layout can‘t be Layout can‘t adjust for mobile view on Android Firefox Preview May 4, 2020
@myuki myuki reopened this May 4, 2020
@myuki myuki changed the title Layout can‘t adjust for mobile view on Android Firefox Preview Layout can‘t adjust for mobile view on Firefox May 12, 2020
@myuki
Copy link
Author

myuki commented May 12, 2020 •
edited
Loading

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

@myuki myuki changed the title Layout can‘t adjust for mobile view on Firefox Layout can‘t adjust for mobile view in Firefox May 12, 2020
@Mister-Hope
Copy link
Contributor

Mister-Hope commented May 15, 2020 •
edited
Loading

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

@myuki myuki mentioned this issue May 15, 2020
Closed
@takenspc
Copy link

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.

@Mister-Hope
Copy link
Contributor

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.

@takenspc
Copy link

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

@Sixteenleft
Copy link

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?

@kbrosnan
Copy link

kbrosnan commented Jul 7, 2020

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

@ksy36
Copy link

ksy36 commented Jul 7, 2020

This issue was originally reported in #2332 and there is a PR fixing it #2333, however the PR wasn't merged yet.
Maybe @sakihet or @ludanxer could give some context on this

@NeverBehave
Copy link

NeverBehave commented Jul 8, 2020 •
edited
Loading

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

#2359
DIYgod/RSSHub#4633

@arkon arkon mentioned this issue Jul 15, 2020
Closed
@myuki myuki mentioned this issue Aug 7, 2020
Merged
This was referenced Oct 28, 2020
Closed
Closed
This was referenced Dec 13, 2020
Open
Closed
This was referenced Jan 12, 2021
Closed
Closed
This was referenced Jun 2, 2021
Closed
Closed
@NeverBehave NeverBehave mentioned this issue Jun 10, 2021
Open
18 tasks
@DarkC35 DarkC35 mentioned this issue Jun 17, 2021
Merged
Closed
kngako pushed a commit to kngako/btcpayserver-doc that referenced this issue Aug 19, 2021
Fix for mobile layout on firefox
02f3f3a 
related to the vuepress issue with the mobile layout removing viewport meta tags on firefox for Android.

Fix is to explicity define it.

vuejs/vuepress#2369
@kngako kngako mentioned this issue Aug 19, 2021
Merged
dennisreimann pushed a commit to btcpayserver/btcpayserver-doc that referenced this issue Aug 19, 2021
@kngako
Fix for mobile layout on firefox (#956)
e91b701 
related to the vuepress issue with the mobile layout removing viewport meta tags on firefox for Android.

Fix is to explicity define it.

vuejs/vuepress#2369

Co-authored-by: Kgothatso Ngako <kpangako@gmail.com>
@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
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
7 participants
@kbrosnan @takenspc @ksy36 @Sixteenleft @NeverBehave @myuki @Mister-Hope