Skip to content

Instantly share code, notes, and snippets.

@gfabrizi
Last active February 14, 2020 22:12
Show Gist options
  • Save gfabrizi/c5134f367218d77e6245613b13060c1c to your computer and use it in GitHub Desktop.
Save gfabrizi/c5134f367218d77e6245613b13060c1c to your computer and use it in GitHub Desktop.
[JOKE] How a website would look on a smartwatch? Try it by pasting this snippet in the web developer console! πŸ˜œπŸ™ƒπŸ˜‚
let watchify = function() {
let watchFrame = Object.assign(document.createElement('div'), {id: 'watch_frame'});
let size = Math.min(document.documentElement.clientWidth, document.documentElement.clientHeight);
watchFrame.style.cssText = "position:fixed;width:" + size + "px;height:" + size + "px;top:50%;left:50%;margin-top:-" + size/2 + "px;margin-left:-" + size/2 + "px;box-shadow:0 0 0 99999px #000;border-radius:50%;z-index:2147483647;pointer-events:none";
if (oldWatchFrame = document.getElementById("watch_frame")) { oldWatchFrame.remove() }
document.querySelector('body').appendChild(watchFrame);
};watchify();window.addEventListener('resize', watchify);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment