From: Jean-Christophe Helary <jean.christophe.helary@traduction-libre.org>
To: emacs-devel <emacs-devel@gnu.org>
Subject: Re: html manual +css
Date: Fri, 27 Dec 2019 00:22:41 +0900 [thread overview]
Message-ID: <77EFA561-E2F9-4BFB-831F-F83B6F05964E@traduction-libre.org> (raw)
In-Reply-To: <29E540AC-0DE4-40A5-AAD6-58FE0178B830@traduction-libre.org>
> On Dec 27, 2019, at 0:08, Jean-Christophe Helary <jean.christophe.helary@traduction-libre.org> wrote:
>
>
>
>> On Dec 26, 2019, at 23:45, Stefan Monnier <monnier@iro.umontreal.ca> 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
next prev parent reply other threads:[~2019-12-26 15:22 UTC|newest]
Thread overview: 31+ messages / expand[flat|nested] mbox.gz Atom feed top
2017-06-02 13:49 html manual +css Jean-Christophe Helary
2017-06-02 14:28 ` Paul Eggert
2017-06-02 14:45 ` Jean-Christophe Helary
2017-06-02 14:56 ` Jean-Christophe Helary
2017-06-02 15:14 ` Yuri Khan
2017-06-02 15:22 ` Eli Zaretskii
2017-06-02 15:29 ` Jean-Christophe Helary
2017-06-05 14:44 ` Jean-Christophe Helary
2017-06-06 22:41 ` Richard Stallman
2017-06-06 23:47 ` Jean-Christophe Helary
2017-06-07 14:27 ` Jean-Christophe Helary
2019-12-23 16:54 ` Jean-Christophe Helary
[not found] ` <jwvr20v6jug.fsf-monnier+emacs@gnu.org>
2019-12-24 9:06 ` Jean-Christophe Helary
2019-12-24 14:37 ` Jean-Christophe Helary
2019-12-24 14:43 ` Jean-Christophe Helary
2019-12-25 22:03 ` Stefan Monnier
2019-12-26 0:08 ` Jean-Christophe Helary
2019-12-26 14:09 ` Jean-Christophe Helary
2019-12-26 14:45 ` Stefan Monnier
2019-12-26 15:08 ` Jean-Christophe Helary
2019-12-26 15:22 ` Jean-Christophe Helary [this message]
2019-12-26 15:50 ` Stefan Monnier
2019-12-26 16:27 ` Yuri Khan
2019-12-26 18:17 ` Stefan Monnier
2019-12-26 16:53 ` Jean-Christophe Helary
2019-12-30 11:53 ` Jean-Christophe Helary
2020-01-15 11:20 ` Gavin Smith
2020-01-15 12:12 ` Jean-Christophe Helary
2020-01-15 13:43 ` Patrice Dumas
2020-01-15 13:52 ` Jean-Christophe Helary
2020-01-15 14:18 ` Patrice Dumas
Reply instructions:
You may reply publicly to this message via plain-text email
using any one of the following methods:
* Save the following mbox file, import it into your mail client,
and reply-to-all from there: mbox
Avoid top-posting and favor interleaved quoting:
https://en.wikipedia.org/wiki/Posting_style#Interleaved_style
* Reply using the --to, --cc, and --in-reply-to
switches of git-send-email(1):
git send-email \
--in-reply-to=77EFA561-E2F9-4BFB-831F-F83B6F05964E@traduction-libre.org \
--to=jean.christophe.helary@traduction-libre.org \
--cc=emacs-devel@gnu.org \
/path/to/YOUR_REPLY
https://kernel.org/pub/software/scm/git/docs/git-send-email.html
* If your mail client supports setting the In-Reply-To header
via mailto: links, try the mailto: link
Be sure your reply has a Subject: header at the top and a blank line
before the message body.
Code repositories for project(s) associated with this external index
https://git.savannah.gnu.org/cgit/emacs.git
https://git.savannah.gnu.org/cgit/emacs/org-mode.git
This is an external index of several public inboxes,
see mirroring instructions on how to clone and mirror
all data and code used by this external index.