From mboxrd@z Thu Jan 1 00:00:00 1970 Path: news.gmane.org!.POSTED.blaine.gmane.org!not-for-mail From: Jean-Christophe Helary Newsgroups: gmane.emacs.devel Subject: Re: html manual +css Date: Fri, 27 Dec 2019 00:08:12 +0900 Message-ID: <29E540AC-0DE4-40A5-AAD6-58FE0178B830@traduction-libre.org> References: <05A866DB-4211-476E-9107-14E5F9BE9232@gmail.com> <53DA475D-B063-470A-BB87-D3FFC9A7CF79@gmail.com> <834lvyct3t.fsf@gnu.org> <01B655FC-51F0-4A33-ADBF-3E1268E9E0EA@gmail.com> <3D282E00-27F3-451A-9895-5BCEEE0B7FA8@gmail.com> <227383E4-BF11-4655-AFDD-CBE25D426A85@traduction-libre.org> Mime-Version: 1.0 (Mac OS X Mail 13.0 \(3608.40.2.2.4\)) Content-Type: text/plain; charset=us-ascii Content-Transfer-Encoding: quoted-printable Injection-Info: blaine.gmane.org; posting-host="blaine.gmane.org:195.159.176.226"; logging-data="102578"; mail-complaints-to="usenet@blaine.gmane.org" To: emacs-devel Original-X-From: emacs-devel-bounces+ged-emacs-devel=m.gmane.org@gnu.org Thu Dec 26 16:08:33 2019 Return-path: Envelope-to: ged-emacs-devel@m.gmane.org Original-Received: from lists.gnu.org ([209.51.188.17]) by blaine.gmane.org with esmtps (TLS1.2:ECDHE_RSA_AES_256_GCM_SHA384:256) (Exim 4.89) (envelope-from ) id 1ikUkZ-000QXJ-HO for ged-emacs-devel@m.gmane.org; Thu, 26 Dec 2019 16:08:31 +0100 Original-Received: from localhost ([::1]:54282 helo=lists1p.gnu.org) by lists.gnu.org with esmtp (Exim 4.90_1) (envelope-from ) id 1ikUkX-0007uo-Kh for ged-emacs-devel@m.gmane.org; Thu, 26 Dec 2019 10:08:29 -0500 Original-Received: from eggs.gnu.org ([2001:470:142:3::10]:44003) by lists.gnu.org with esmtp (Exim 4.90_1) (envelope-from ) id 1ikUkQ-0007tW-CS for emacs-devel@gnu.org; Thu, 26 Dec 2019 10:08:23 -0500 Original-Received: from Debian-exim by eggs.gnu.org with spam-scanned (Exim 4.71) (envelope-from ) id 1ikUkO-0004Cj-C9 for emacs-devel@gnu.org; Thu, 26 Dec 2019 10:08:21 -0500 Original-Received: from relay5-d.mail.gandi.net ([217.70.183.197]:44813) by eggs.gnu.org with esmtps (TLS1.0:DHE_RSA_AES_256_CBC_SHA1:32) (Exim 4.71) (envelope-from ) id 1ikUkO-0004BY-66 for emacs-devel@gnu.org; Thu, 26 Dec 2019 10:08:20 -0500 X-Originating-IP: 182.251.133.105 Original-Received: from [172.20.10.3] (KD182251133105.au-net.ne.jp [182.251.133.105]) (Authenticated sender: jean.christophe.helary@traduction-libre.org) by relay5-d.mail.gandi.net (Postfix) with ESMTPSA id 4848C1C0003 for ; Thu, 26 Dec 2019 15:08:16 +0000 (UTC) In-Reply-To: X-Mailer: Apple Mail (2.3608.40.2.2.4) X-detected-operating-system: by eggs.gnu.org: GNU/Linux 2.2.x-3.x [generic] [fuzzy] X-Received-From: 217.70.183.197 X-BeenThere: emacs-devel@gnu.org X-Mailman-Version: 2.1.23 Precedence: list List-Id: "Emacs development discussions." List-Unsubscribe: , List-Archive: List-Post: List-Help: List-Subscribe: , Errors-To: emacs-devel-bounces+ged-emacs-devel=m.gmane.org@gnu.org Original-Sender: "Emacs-devel" Xref: news.gmane.org gmane.emacs.devel:243648 Archived-At: > On Dec 26, 2019, at 23:45, Stefan Monnier = wrote: >=20 >> 1) to have mobile browsers recognize media queries related to the = display >> size it is necessary to add a tag to the that contains >> a reference to the "viewport" of the display: >>=20 >> = https://www.reddit.com/r/css/comments/eft71n/iphone_safari_does_not_respon= d_to_maxwidth_media/ >=20 > 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-resoluti= on-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. >=20 > Portrait mode now looks great, indeed, thanks. >=20 > 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... Jean-Christophe Helary ----------------------------------------------- http://mac4translators.blogspot.com @brandelune