Hey all,
I’m new to web-dev and don’t know if this is working as intended, but it seems odd to me. Briefly, disabling touch even simulation causes my webpage to be rendered differently (see attached photos). Is this due to my code, Firefox dev tools, or something else?
Thanks.
Hi, did you find out what was causing this in the end? As I’m having a similar issue right now.
Baran, sorry but no I have not figured it out yet. As a workaround I added ‘!important’ to the css styles that were being affected.
I figured out what my issue was, it was due to me missing a viewport meta tag. This is what I added to make mine work <meta name="viewport" content="width=device-width, initial-scale=1">
Source - Viewport meta tag
I’ve tested your JSFiddle on Windows 10 with Firefox 84.0.1 and 86.0a1 (2020-12-25) and I’ve enabled RDM and selected “iPhone 6/7/8 Plus iOS 11” from the menu, because that’s what I think I see in your screenshot.
With that setup I also see a difference in behavior but not in relation with touch simulation but in regard of which CSS rules get applied.
Firefox 84.0.1:
Firefox 86.0a1
So in Firefox 84 the following rule gets applied but not in 86 (again, independent of touch simulation):
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px){
html {font-size: 16px;}
}
Can you confirm that?
Sebastian