Disabling Touch Simulation in Firefox Renders HTML/CSS Differently

user_6927146 0
Viewed 437

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.

Code Here: Codepen Touch Simulation ON Touch Simulation OFF

firefox-developer-tools
1 Answers

You need to add following code to the head section (before title tag):

<meta name="viewport" content="width=device-width, initial-scale=1">

From HEAD

  • meta name="viewport" - viewport settings related to mobile responsiveness
  • width=device-width means that it will use the physical width of the device (instead of zooming out) which is good with mobile friendly pages
  • initial-scale=1 is the initial zoom, 1 means no zoom

For more info about viewport tag see: Using the viewport meta tag to control layout on mobile browsers

user_33679740
Related