[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:08:12 +0900 |
> 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...
Jean-Christophe Helary
-----------------------------------------------
http://mac4translators.blogspot.com @brandelune
- Re: html manual +css, Jean-Christophe Helary, 2019/12/23
- Message not available
- Re: html manual +css, Jean-Christophe Helary, 2019/12/24
- Re: html manual +css, Jean-Christophe Helary, 2019/12/24
- Re: html manual +css, Stefan Monnier, 2019/12/25
- Re: html manual +css, Jean-Christophe Helary, 2019/12/25
- Re: html manual +css, Jean-Christophe Helary, 2019/12/26
- Re: html manual +css, Stefan Monnier, 2019/12/26
- Re: html manual +css,
Jean-Christophe Helary <=
- Re: html manual +css, Jean-Christophe Helary, 2019/12/26
- Re: html manual +css, Stefan Monnier, 2019/12/26
- Re: html manual +css, Yuri Khan, 2019/12/26
- Re: html manual +css, Stefan Monnier, 2019/12/26
- Re: html manual +css, Jean-Christophe Helary, 2019/12/26
- Re: html manual +css, Jean-Christophe Helary, 2019/12/30