Skip to content

Instantly share code, notes, and snippets.

@RaschidJFR

RaschidJFR/emulate-mobile.css

Created November 7, 2019 22:34
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save RaschidJFR/c30104feb2c6d2f6947c0200fe134b6f to your computer and use it in GitHub Desktop.
Save RaschidJFR/c30104feb2c6d2f6947c0200fe134b6f to your computer and use it in GitHub Desktop.
Download ZIP
Emulate mobile screen dimensions using CSS
Raw
emulate-mobile.css
/**
* Add the class `emulate-mobile` (programmatically) to `body` to emulate mobile resolution.
*
* @example
* const body = document.getElementsByTagName('body')[0] as HTMLBodyElement;
* body.classList.add('emulate-mobile');
*/
body.emulate-mobile {
--marginX: calc(50vw - 180px);
--marginY: calc(50vh - 320px);
margin-left: var(--marginX) !important;
margin-top: var(--marginY) !important;
width: 360px !important;
height: 640px !important;
background-color: black !important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment