Skip to content

Instantly share code, notes, and snippets.

@ptb

ptb/ioscssclasses.js

Last active December 10, 2015 23:58
Show Gist options
  • Save ptb/4512971 to your computer and use it in GitHub Desktop.
Save ptb/4512971 to your computer and use it in GitHub Desktop.
Download ZIP
On iOS devices, add CSS classes to <html> element for Retina display support, iPod or iPad device class, and iOS version. iPod touches and iPhones both use the 'ipod' class for brevity. Example result: <html class='ios1 ios2 ios3 ios4 ios5 ios6 ipod online portrait retina transform3d'>
Raw
ioscssclasses.js
/*! gist.github.com/4512971 | (c) 2013 Peter T Bosse II | Apache license */
/*! Portions from: jqtouch.com | (c) 2009-2013 Sencha Labs | MIT license */
/*jshint camelcase:true, curly:true, eqeqeq:true, quotmark:single, unused:true, laxbreak:false, onevar:true, latedef:true, trailing:true, indent:2, white:true, strict:true, browser:true, devel:true, jquery:true, prototypejs:true, undef:true */
(function () {
'use strict';
function iPod() {
return (/iP(hone|od)/.test(navigator.platform));
}
function iPad() {
return (/iPad/.test(navigator.platform));
}
function iOSVersion() {
if (iPod() || iPad()) {
// supports iOS 2.0 and later: <http://bit.ly/TJjs1V>
var v = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);
return [parseInt(v[1], 10), parseInt(v[2], 10), parseInt(v[3] || 0, 10)];
}
}
function supportsTransform3d() {
var body, head, result, style, testdiv;
head = document.getElementsByTagName('head')[0];
body = document.body;
style = document.createElement('style');
style.textContent = '@media (transform-3d), (-o-transform-3d), (-moz-transform-3d), (-webkit-transform-3d) { #transform3dtest { height: 3px; } }';
testdiv = document.createElement('div');
testdiv.id = 'transform3dtest';
head.appendChild(style);
body.appendChild(testdiv);
result = (testdiv.offsetHeight === 3);
style.parentNode.removeChild(style);
testdiv.parentNode.removeChild(testdiv);
return result;
}
function getClasses() {
return document.documentElement.className.split(' ');
}
function setClasses(a) {
document.documentElement.className = a.sort().filter(function (e) { return e; }).join(' ');
}
function addClass(c) {
var a = getClasses();
a.push(c);
setClasses(a);
}
function removeClasses(a) {
var b, c, d, e;
for (b = 0, c = a.length; b < c; b++) {
d = getClasses();
e = d.indexOf(a[b]);
if ((e !== -1) && (a[b] === d[e])) {
d.splice(e, 1);
setClasses(d);
}
}
}
function addiOSClasses() {
var i, m;
if (window.devicePixelRatio > 1) {
addClass('retina');
}
if (navigator.standalone) {
addClass('standalone');
}
if (supportsTransform3d()) {
addClass('transform3d');
}
if (iPod()) {
addClass('ipod');
} else if (iPad()) {
addClass('ipad');
} else {
return;
}
for (i = 1, m = iOSVersion()[0]; i <= m; i++) {
addClass('ios' + i);
}
}
function addNetworkStatus() {
var status = (navigator.onLine ? 'online' : 'offline');
removeClasses(['online', 'offline']);
addClass(status);
}
function addOrientation() {
var orient = (Math.abs(window.orientation) === 90 ? 'landscape' : 'portrait');
removeClasses(['portrait', 'landscape']);
addClass(orient);
}
// iOS 4.3.5 has Safari 5.0.2, iOS 5.0 has Safari 5.1: <http://bit.ly/nb8R92>
// addEventListener('online') supported by Safari 5.0.4: <http://mzl.la/W3SvU6>
if (iOSVersion()[0] < 5) {
setInterval(function () {
addNetworkStatus();
}, 5000);
} else {
window.addEventListener('online', addNetworkStatus, 0);
window.addEventListener('offline', addNetworkStatus, 0);
}
window.addEventListener('orientationchange', addOrientation, 0);
document.addEventListener('DOMContentLoaded', addiOSClasses, 0);
document.addEventListener('DOMContentLoaded', addNetworkStatus, 0);
document.addEventListener('DOMContentLoaded', addOrientation, 0);
})();
Raw
ioscssclasses.min.js
/*! gist.github.com/4512971 | (c) 2013 Peter T Bosse II | Apache license */
/*! Portions from: jqtouch.com | (c) 2009-2013 Sencha Labs | MIT license */
(function(){'use strict';function a(){return/iP(hone|od)/.test(navigator.platform)}function b(){return/iPad/.test(navigator.platform)}function c(){if(a()||b()){var c=navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/);return[parseInt(c[1],10),parseInt(c[2],10),parseInt(c[3]||0,10)]}}function d(){var a,b,c,d,e;return b=document.getElementsByTagName('head')[0],a=document.body,d=document.createElement('style'),d.textContent='@media (transform-3d),(-o-transform-3d),(-moz-transform-3d),(-webkit-transform-3d){#t3d{height:3px}}',e=document.createElement('div'),e.id='t3d',b.appendChild(d),a.appendChild(e),c=3===e.offsetHeight,d.parentNode.removeChild(d),e.parentNode.removeChild(e),c}function e(){return document.documentElement.className.split(' ')}function f(a){document.documentElement.className=a.sort().filter(function(a){return a}).join(' ')}function g(a){var b=e();b.push(a),f(b)}function h(a){var b,c,d,g;for(b=0,c=a.length;c>b;b++)d=e(),g=d.indexOf(a[b]),-1!==g&&a[b]===d[g]&&(d.splice(g,1),f(d))}function i(){var e,f;if(window.devicePixelRatio>1&&g('retina'),navigator.standalone&&g('standalone'),d()&&g('transform3d'),a())g('ipod');else{if(!b())return;g('ipad')}for(e=1,f=c()[0];f>=e;e++)g('ios'+e)}function j(){var a=navigator.onLine?'online':'offline';h(['online','offline']),g(a)}function k(){var a=90===Math.abs(window.orientation)?'landscape':'portrait';h(['portrait','landscape']),g(a)}5>c()[0]?setInterval(function(){j()},5e3):(window.addEventListener('online',j,0),window.addEventListener('offline',j,0)),window.addEventListener('orientationchange',k,0),document.addEventListener('DOMContentLoaded',i,0),document.addEventListener('DOMContentLoaded',j,0),document.addEventListener('DOMContentLoaded',k,0)})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment