[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 01:53:42 +0900 |
> On Dec 27, 2019, at 0:50, Stefan Monnier <address@hidden> 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
- Re: html manual +css, (continued)
- 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, 2019/12/26
- 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 <=
- Re: html manual +css, Jean-Christophe Helary, 2019/12/30