Created
August 3, 2019 17:00
-
-
Save hawkeye64/d7aa925f7b0a5d6c9de7b4242ad13c2f to your computer and use it in GitHub Desktop.
dynamically set meta based on screen width
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//sweet hack to set meta viewport for desktop sites squeezing down to mobile that are big and have a fixed width | |
//first see if they have window.screen.width avail | |
(function() { | |
if (window.screen.width) | |
{ | |
var setViewport = { | |
//smaller devices | |
phone: 'width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no', | |
//bigger ones, be sure to set width to the needed and likely hardcoded width of your site at large breakpoints | |
other: 'width=1045,user-scalable=yes', | |
//current browser width | |
widthDevice: window.screen.width, | |
//your css breakpoint for mobile, etc. non-mobile first | |
widthMin: 560, | |
//add the tag based on above vars and environment | |
setMeta: function () { | |
var params = (this.widthDevice <= this.widthMin) ? this.phone : this.other; | |
var head = document.getElementsByTagName("head")[0]; | |
var viewport = document.createElement('meta'); | |
viewport.setAttribute('name','viewport'); | |
viewport.setAttribute('content',params); | |
head.appendChild(viewport); | |
} | |
} | |
//call it | |
setViewport.setMeta(); | |
} | |
}).call(this); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment