01406: Core responsive skin discussion
Description: Here we can discuss improvements for the "pmwiki-responsive" core skin. Please add your comments in sections below. --Petko April 26, 2017, at 05:35 PM
Please add a new issue here.
Background Color (click to open)
When browsing pmwiki.org, while using IceApe with a dark gtk? theme in Linux, in the main body of the page, I see white letters on white background. The same happens with the new skin. My guess is that, by choice, there is no background or font color set, and the browser uses its default choice: white.
View switching (click to open)
A quick check with my smart phone shows me two problems:
- switching from landscape to portrait or vice versa on some pages the page does not size to the right width. Check page PmWiki.Tables for instance. Switching over to portrait view can display a page too narrow, or switching over to landscape view can display the page too wide (cutting out part on the right).
- when switching from portrait with side menu opened out to landscape, the landscape view is greyed out (on my phone screen in landscape the side menu appears always visible, i.e. same as desktop view, so page should not be greyed out.
HansB April 28, 2017, at 09:22 AM
Thank you, #2 is now fixed. Can you elaborate on #1 ? On my computer, Android phone and Android tablet, both with Firefox and Chrome (and Epiphany), I cannot experience any problem with the Tables page when rotating the device or resizing the window. My two iPhones are is too small and thus stuck in narrow/mobile view. --Petko April 28, 2017, at 10:01 AM
Ok, I see, thanks. The zoom-in-out is the default browser behavior, it is not the skin that tries to adjust to the longest preformatted text line, but the browser. The skin does nothing to cause or prevent this, but every browser does it its way when you change the orientation. The only way I know to prevent this is to set minimum and maximum scale to 1 in the meta viewport, and this will also prevent a person to zoom in or out. I don't want to do this, I prefer being able to zoom if I like. Disabling zoom always for everybody seems to me worse than the browser changing the zoom only when you rotate the device, and only when there is a large element in the page. --Petko April 29, 2017, at 10:08 AM
Should the large preformatted blocks have a scrollbar or not was discussed at Skins:2016-Talk, and any solution will be better than what the old skin did (enlarge the whole page). In "desktop/landscape" mode they did have a scrollbar as it was assumed that one would use a computer with mouse and keyboard. It may be an incorrect assumption, as even laptops and all-in-ones have now touch screens, so it may be logical for these blocks to behave the same way on the two layouts. --Petko April 29, 2017, at 10:08 AM
Ok, moved overflow:auto from the desktop section to the general section. This also fixes the zoom-after-rotate confusion. --Petko April 29, 2017, at 02:43 PM
Minimum screen width for desktop/landscape mode (click to open)
Minimum screen width for desktop/landscape mode
I also think the side menu should still be hidden on a 1280px wide screen, and the fonts not reduced so much. - HansB April 29, 2017, at 01:50 PM
Keep in mind that some desktop&laptop computer monitors are still large 1280, 1024 or even 800 real pixels. The pixels themselves are larger than those on the phones (72-96 per inch on monitors vs. up to 806 per inch on phones) and it is perfectly fine to read text on such monitors in the landscape/desktop mode.
However, I completely agree that on an actual mobile phone it will be better to have the "mobile" font sizes and line heights in both orientations: the "mobile" view is specifically designed so that it is easy to tap on links without risking a mistake. Not that much the text size (even small text is very easy to read on a very high density screen), but the interaction. I'll think about it. --Petko April 29, 2017, at 03:21 PM
I've increased the min-width for "desktop" view to 50em which is about 800 "Reference pixels". This causes a 5.5" FullHD phone (1920x1080) to always display the "mobile" view, but a 7" tablet (1024x600) in landscape mode displays the "desktop" view, as well as a 13.3" laptop (1366x768). --Petko April 30, 2017, at 09:31 AM