myuki
commented
4 years ago I find it also can be reproduced in Firefox Desktop in Responsive Design Mode. It only occurs in specific status.
Open myuki opened 4 years ago
myuki
commented
4 years ago I find it also can be reproduced in Firefox Desktop in Responsive Design Mode. It only occurs in specific status.
Mister-Hope
commented
4 years ago 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).
takenspc
commented
4 years ago 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
commented
4 years ago 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
commented
4 years ago
<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
commented
4 years ago 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
commented
4 years ago Chrome behavior here is not spec compliant. Removing the meta viewport tag should display the desktop site.
ksy36
commented
4 years ago 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
NeverBehave
commented
4 years ago 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
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:
Firefox Desktop:
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:
Firefox Desktop (Responsive Design Mode):
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: