emacs-devel
[Top][All Lists]
Advanced
[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]

Re: html manual +css

From: Jean-Christophe Helary
Subject: Re: html manual +css
Date: Fri, 27 Dec 2019 00:22:41 +0900 

> On Dec 27, 2019, at 0:08, Jean-Christophe Helary <address@hidden> wrote:
> 
> 
> 
>> On Dec 26, 2019, at 23:45, Stefan Monnier <address@hidden> wrote:
>> 
>>> 1) to have mobile browsers recognize media queries related to the display
>>> size it is necessary to add a <meta> tag to the <head> that contains
>>> a reference to the "viewport" of the display:
>>> 
>>> https://www.reddit.com/r/css/comments/eft71n/iphone_safari_does_not_respond_to_maxwidth_media/
>> 
>> I wonder why the HTML needs this and what it really means.
>> [ E.g. the name "device-width" makes it sound like it intends to reflect
>> the physical size of the screen, whereas people watch their phone
>> screen from a much shorter distance than their desktop screen, so we
>> should pay attention to the "apparent size" rather than the physical
>> size.  ]
> 
> The MDN doc on viewport is here:
> https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
> 
> The W3C is trying to port that directly to CSS but the spec is only a draft:
> https://drafts.csswg.org/css-device-adapt/#the-viewport
> 
> My understanding is that as you noticed, pixel numbers on mobile are 
> equivalent or superior to desk/laptops but pixel density is much higher on 
> mobile, so there is a need to tell the browser not to consider how many 
> pixels are required to display a given content but on which viewport is 
> actually is displayed.
> 
> https://medium.com/@elad/understanding-the-difference-between-css-resolution-and-device-resolution-28acae23da0b
> 
> and
> 
> https://www.quirksmode.org/mobile/viewports2.html
> 
> I still need to wrap my mind around all that but it will make sense 
> eventually :) I'm going to spend a few days reading all that and practicing...
> 
>>> 3) then I put all that online and now the sample that I presented yesterday
>>> works perfectly well on a small mobile device, as you wanted.
>> 
>> Portrait mode now looks great, indeed, thanks.
>> 
>> In landscape mode, tho, the browser is wide enough that the top-header
>> fits on a single line and hence "sticks around" when you scroll, thus
>> eating up a lot of screen real estate (especially since phones nowadays
>> have an appalling aspect ratio, very far from the beloved 4:3).
> 
> Ooops. Ok, I'm working on that...

Ok, it should work now, with the extra bonus that if your desktop browser 
window is not high enough, the behavior will be the same as landscape mobile: 
the menu will stay at the top of the page in "summarized" mode.

@media (max-width: 40em), (max-height: 40em) and (orientation:landscape) {

The ", " stands for "OR".

I'm regenerating the whole html set to see how that looks with other manuals.

To reproduce what I did locally:

Change the Makefile files for the various manuals to add

HTML_OPTS = --no-split --html --css-ref=emacs.css -c EXTRA_HEAD="<meta 
name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">"

or

HTML_OPTS = --html --css-ref=emacs.css -c EXTRA_HEAD="<meta name=\"viewport\" 
content=\"width=device-width, initial-scale=1.0\">"

if you want to have a split manual.

Generate the doc as usual and put your own "emacs.css" responsive design css in 
the package (mine is here:
https://github.com/brandelune/brandelune.github.io/blob/gh-pages/code/emacs.css)


Jean-Christophe Helary
-----------------------------------------------
http://mac4translators.blogspot.com @brandelune
reply via email to
[Prev in Thread] Current Thread [Next in Thread]