[csswg-drafts] @media queries on mobile + zoom and media queries don't re-evaluate on zoom (#10399)

wesleyolis has just created a new issue for https://github.com/w3c/csswg-drafts:

== @media queries on mobile + zoom and media queries don't re-evaluate on zoom ==
Hi,

Sadly after many attempts and checking and testing, with and without viewport, permuation checks settings and using or not using desktop mode. It seems as if browsers don't re-evaluate CSS @media when the zoom level is changed when on a mobile device.
Everything works on desktops and emulators. Also when using zoom:2;overflow:scroll; basically browsers don't show scroll bars for the overflowing height.

I would like to suggest the following additional media queries, to allow us to push the boundaries of mobile further.
I now have limitations and without improvements, we shall be limited in the future. I want really nice layouts.

1. Support zoom media query for re-rendering optimization and evaluation of queries optimization.
2. Support query of zoom level applied to the browser after initial landscape or portrait layouts.
3. Support for else condition in media queries, to really optimize the experience, else mess of not media queries.

Basically, re-evaluate if the zoom level changes or if there is pinch zoom to the dom. That way optimise which media queries
need to be re-evaluated.
```.css


@media zoom and min-width {
}

@media zoom and zoom < 1 {
.container {
 grid-template-columns: repeat(autofill, minmax(1fr,40rem))
 }
}
else @ @media zoom and zoom > 1.25 {
.container {
 grid-template-columns: minmax(1fr,auto);     
}
}

@media zoom and min-width {

} else
@media zoom max-width {

}

```



Example:
[https://jonginenge.co.za/livecams/nahoonpoint/daily/test.html](https://jonginenge.co.za/livecams/nahoonpoint/daily/test.html)
```.html
<html>
<body>
<!--StartFragment-->
 
--
/*
  | In order to see how the BROWSER ZOOM affects the screen width, we're going to
  | change the background color / text color as the screen width changes.
  | */
  | body {
  | background-color: #000000 ;
  | color: #ffffff ;
  | }
  | /*
  | As the screen dimensions get larger, the background of the screen will get
  | lighter. Then, as we ZOOM IN, and the dimensions get smaller, the background
  | of the screen should get darker.
  | */
  | @media screen and ( min-width: 200px ) {
  | body {
  | background-color: #111111 ;
  | }
  | }
  | @media screen and ( min-width: 300px ) {
  | body {
  | background-color: #222222 ;
  | }
  | }
  | @media screen and ( min-width: 400px ) {
  | body {
  | background-color: #444444 ;
  | }
  | }
  | @media screen and ( min-width: 500px ) {
  | body {
  | background-color: #666666 ;
  | }
  | }
  | @media screen and ( min-width: 600px ) {
  | body {
  | background-color: #888888 ;
  | }
  | }
  | @media screen and ( min-width: 700px ) {
  | body {
  | background-color: #aaaaaa ;
  | color: #000000 ;
  | }
  | }
  | @media screen and ( min-width: 800px ) {
  | body {
  | background-color: #cccccc ;
  | }
  | }
  | @media screen and ( min-width: 900px ) {
  | body {
  | background-color: #dddddd ;
  | }
  | }
  | @media screen and ( min-width: 1000px ) {
  | body {
  | background-color: #ffffff ;
  | }
  | }
  |  

<!--EndFragment-->
</body>
</html>
```

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10399 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Saturday, 8 June 2024 08:08:53 UTC