unofficial mirror of emacs-devel@gnu.org 
 help / color / mirror / code / Atom feed
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 01:53:42 +0900	[thread overview]
Message-ID: <6D83441F-B5E3-4513-B008-87AAC0DF151F@traduction-libre.org> (raw)
In-Reply-To: <jwvv9q36qi0.fsf-monnier+emacs@gnu.org>



> On Dec 27, 2019, at 0:50, Stefan Monnier <monnier@iro.umontreal.ca> wrote:
> 
>>> 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
> 
> So, IIUC in the long run we don't need to change the HTML because this
> `meta` element is only a hack added by Safari and the corresponding
> standard feature is not yet standardized but will likely put the
> corresponding info in the CSS.

Not really. The feature was added by Apple/mobile Safari because it was the first to provide a full-browser application on a small screen but other vendors are now using the feature and as the MDN site says:

> A typical mobile-optimized site contains something like the following:
> 
> <meta name="viewport" content="width=device-width, initial-scale=1">

So it's not targeting mobile Safari anymore but any standard browser on the existing mobile platforms.

i.e., you'd see the same with Chrome on Android as you'd see on Safari/iOS.

For ex. this site gives screen sizes for all sorts of devices:
https://mediag.com/blog/popular-screen-resolutions-designing-for-all/

Regarding the "long run" remark, the CSS property has been proposed in 2011 and the document is still a working draft with Firefox and Safari not supporting the features (Chrome/Edge/Internet Explorer do). Also, the implementation seems to try to copy Apple's original proposal... Politics !!!

So it looks like we're in for some time. Although I just asked extra info on reddit regarding the state of the spec.

>>> https://medium.com/@elad/understanding-the-difference-between-css-resolution-and-device-resolution-28acae23da0b
> 
> This page is pretty poor, not explaining what the "CSS pixel" is
> supposed to represent; taking "browser provided data" as gospel ;-)

:)

>> 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) {
> 
> It's indeed better but with one regression: now in landscape on my
> phone, the top-line is spread as a "vertical menu" whereas it used to
> fit on a single line.

You're right.

I split the query in two:

@media (max-height: 40em) and (orientation:landscape) {
  div.header {
      position: static;
      border-color: brown;
      width: fit-content;
  }    
}

@media (max-width: 40em) {
  div.header {
      position: static;
      border-color: brown;
      width: fit-content;
  }

and if the landscape mode has enough width then it won't get the extra menu modifications that are set by max-width.


Jean-Christophe Helary
-----------------------------------------------
http://mac4translators.blogspot.com @brandelune





  parent reply	other threads:[~2019-12-26 16:53 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
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 [this message]
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

  List information: https://www.gnu.org/software/emacs/

* Reply using the --to, --cc, and --in-reply-to
  switches of git-send-email(1):

  git send-email \
    --in-reply-to=6D83441F-B5E3-4513-B008-87AAC0DF151F@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 public inbox

	https://git.savannah.gnu.org/cgit/emacs.git

This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox;
as well as URLs for read-only IMAP folder(s) and NNTP newsgroup(s).