Version 11.0.0 causes 'mobile' to activate on normal screen
jkleiser opened this issue · 7 comments
I just took my (local) apprun-classyui-spa from classy-ui 10.2.1 to 11.0.0 and noticed that the main margin-left was reduced from 2rem to 1rem; margin-right was also shrunk. This is the start of the generated HTML of the div when I do npm start:
<div class="margin-left__SPACE_70 mobile:margin-left__SPACE_40 margin-right__SPACE_40 mobile:margin-right__SPACE_20
The live result (using 11.0.0) can be seen here: https://apprun-classyui-spa.surge.sh/
The code at https://github.com/jkleiser/apprun-classyui-spa is still using classy-ui 10.2.1.
Attached is a dump from devtools showing 'mobile' active.
Yeah, I am going crazy with this... I do not quite understand what is the expected usage of media queries. max-width or min-width? I see both being used by different libraries.
Me going back and forth on this is the container class of Bootstrap CSS, which I try to replicate in the demo library. It is not possible to express it with max-width, only min-width.
But what I see now is that when using min-width we loose the range of mobile. Researching a bit more, the mobil media query is special. It needs to be both min-width and max-width.
That means usage of mobile, tablet, laptop and desktop will override each other up to the point of desktop which now becomes "everything up from that breakpoint", which is what it should be.
With the max-width approach the desktop version would only work up to 1280px, which is wrong... the breakpoint is where the device starts, not where it ends.... with the exception of mobile.... where you really want to define it as everything from 0. Question is just how you express it.
Anyways. Now the first media query is:
`@media (max-width: ${breakpoints.MOBILE}) and (min-width: ${breakpoints.MOBILE}){}Released as latest beta 😄
No wait... this is wrong... I will put back max-width and look hard at what I am trying to achieve in the library again... this is mind bending stuff 😂
Oh, also detected a specificity issue here, that is probably what I experienced and it confused me. Fixing that now 😄
With version 11.0.5 my margins are now back to what I intended. Thanks.
I know you're busy with other tasks right now. I just want to mention that I have added a "media query indicator" to my app. You may test it here, at the bottom: https://apprun-classyui-spa.surge.sh/#Classy-UI
Two things may need a fix: (1) On a mobile, all four screen classes (desktop, laptop, mobile, tablet) are triggered. (2) On a MacBook Air, only the desktop class is triggered, not the laptop class.
I have updated my code at https://github.com/jkleiser/apprun-classyui-spa .
(1)
Yeah, so this is what is so insanely confusing about media queries. We are now running a max-width strategy, which means that if the width of the screen is less than what the media query states, it is activated. Which means a mobile sized screen is less than all other screens, meaning that their css activates. That said.... your test is a little bit weird 😄 It should rather be one button and the color/size/whatever of that button changes based on the screen you are on. That is how media queries really work. It is not to identify the device, it is to override styles based on the size of the window 😄
If we were to identify the exact device, we would have exact media queries, like From 0px - 640px, but the problem with that strategy is that a device can not start where an other device ends.
Imagine mobile 0px - 640px. So Tablet would then have to start at 640px. But that does not really work, cause if mobile ends at 640px and tablet starts at 640px they conflict. Meaning on a tab you would maybe see a mobile version or maybe not, because a mobile style was not defined. It all becomes very confusing.
So media queries is not to identify device, but to override styles based on the size 😄
(2)
There is nothing special about devices related to this, cause it is just size of browser, so would have to be like a browser issue?
Thanks. I'll redo my indicators.