BranchesTags

Repository files navigation

DEVICE.JS

Device.js makes it easy to write conditional CSS and/or JavaScript based on device operating system (iOS, Android, Blackberry, Windows, Firefox OS, MeeGo), orientation (Portrait vs. Landscape), and type (Tablet vs. Mobile).

View the Demo →

EXAMPLES

Device.js inserts CSS classes into the <html> element.

iPhone

Android Tablet

Blackberry Tablet

DEVICE SUPPORT

  • iOS: iPhone, iPod, iPad
  • Android: Phones & Tablets
  • Blackberry: Phones & Tablets
  • Windows: Phones & Tablets
  • Firefox OS: Phones & Tablets

USAGE

Just include the script. The script then updates the <html> section with the appropriate classes based on the device's characteristics.

<scriptsrc="device.js"></script>

CONDITIONAL CSS

The following tables map which CSS classes are added based on device and orientation.

Device CSS Class Names

DeviceCSS Classes
iPadios ipad tablet
iPhoneios iphone mobile
iPodios ipod mobile
Android Phoneandroid mobile
Android Tabletandroid tablet
BlackBerry Phoneblackberry mobile
BlackBerry Tabletblackberry tablet
Windows Phonewindows mobile
Windows Tabletwindows tablet
Firefox OS Phonefxos mobile
Firefox OS Tabletfxos tablet
MeeGomeego
Desktopdesktop

Orientation CSS Class Names

OrientationCSS Classes
Landscapelandscape
Portraitportrait

CONDITIONAL JAVASCRIPT

Device.js also includes support for conditional JavaScript, allowing you to write checks on the following device characteristics:

Device JavaScript Methods

DeviceJavaScript Method
Mobiledevice.mobile()
Tabletdevice.tablet()
iOSdevice.ios()
iPaddevice.ipad()
iPhonedevice.iphone()
iPoddevice.ipod()
Androiddevice.android()
Android Phonedevice.androidPhone()
Android Tabletdevice.androidTablet()
BlackBerrydevice.blackberry()
BlackBerry Phonedevice.blackberryPhone()
BlackBerry Tabletdevice.blackberryTablet()
Windowsdevice.windows()
Windows Phonedevice.windowsPhone()
Windows Tabletdevice.windowsTablet()
Firefox OSdevice.fxos()
Firefox OS Phonedevice.fxosPhone()
Firefox OS Tabletdevice.fxosTablet()
MeeGodevice.meego()

Orientation JavaScript Methods

OrientationJavaScript Method
Landscapedevice.landscape()
Portraitdevice.portrait()

Utility Methods

device.noConflict()

Run device.js in noConflict mode, returning the device variable to its previous owner. Returns a reference to the device object.

vardevicejs=device.noConflict();

BEST PRACTICES

Environment detection has a high rate of misuse. Often times, folks will attempt to work around browser feature support problems by checking for the affected browser and doing something different in response. The preferred solution for those kinds of problems, of course, is to check for the feature, not the browser (ala Modernizr).

However, that common misuse of device detection doesn't mean it should never be done. For example, device.js could be employed to change the interface of your web app such that it uses interaction patterns and UI elements common to the device it's being presented on. Android devices might get a slightly different treatment than Windows or iOS, for instance. Another valid use-case is guiding users to different app stores depending on the device they're using.

In short, check for features when you need features, and check for the browser when you need the browser.

CONTRIBUTING

  1. Fork it
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Run grunt to automagically compile your changes (Grunt)
  4. Make changes to src/device.coffee
  5. Commit your changes (git commit -am 'Added some feature') - PLEASE DO NOT COMMITlib/*.js
  6. Push to the branch (git push origin my-new-feature)
  7. Create new Pull Request

About

Device.js makes it easy to write conditional CSS _and/or_ JavaScript based on device operating system (iOS, Android, Blackberry, Windows, Firefox OS, MeeGo), orientation (Portrait vs. Landscape), and type (Tablet vs. Mobile).

matthewhudson.me/projects/device.js/

Resources

Readme
MIT license
Activity

Stars

1 star

Watchers

1 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
BranchesTags
Repository files navigation
DEVICE.JS
Device.js makes it easy to write conditional CSS and/or JavaScript based on device operating system (iOS, Android, Blackberry, Windows, Firefox OS, MeeGo), orientation (Portrait vs. Landscape), and type (Tablet vs. Mobile).
View the Demo →
EXAMPLES
Device.js inserts CSS classes into the <html> element.
iPhone
Android Tablet
Blackberry Tablet
DEVICE SUPPORT
  • iOS: iPhone, iPod, iPad
  • Android: Phones & Tablets
  • Blackberry: Phones & Tablets
  • Windows: Phones & Tablets
  • Firefox OS: Phones & Tablets
USAGE
Just include the script. The script then updates the <html> section with the appropriate classes based on the device's characteristics.
<scriptsrc="device.js"></script>
CONDITIONAL CSS
The following tables map which CSS classes are added based on device and orientation.
Device CSS Class Names
DeviceCSS Classes
iPadios ipad tablet
iPhoneios iphone mobile
iPodios ipod mobile
Android Phoneandroid mobile
Android Tabletandroid tablet
BlackBerry Phoneblackberry mobile
BlackBerry Tabletblackberry tablet
Windows Phonewindows mobile
Windows Tabletwindows tablet
Firefox OS Phonefxos mobile
Firefox OS Tabletfxos tablet
MeeGomeego
Desktopdesktop
Orientation CSS Class Names
OrientationCSS Classes
Landscapelandscape
Portraitportrait
CONDITIONAL JAVASCRIPT
Device.js also includes support for conditional JavaScript, allowing you to write checks on the following device characteristics:
Device JavaScript Methods
DeviceJavaScript Method
Mobiledevice.mobile()
Tabletdevice.tablet()
iOSdevice.ios()
iPaddevice.ipad()
iPhonedevice.iphone()
iPoddevice.ipod()
Androiddevice.android()
Android Phonedevice.androidPhone()
Android Tabletdevice.androidTablet()
BlackBerrydevice.blackberry()
BlackBerry Phonedevice.blackberryPhone()
BlackBerry Tabletdevice.blackberryTablet()
Windowsdevice.windows()
Windows Phonedevice.windowsPhone()
Windows Tabletdevice.windowsTablet()
Firefox OSdevice.fxos()
Firefox OS Phonedevice.fxosPhone()
Firefox OS Tabletdevice.fxosTablet()
MeeGodevice.meego()
Orientation JavaScript Methods
OrientationJavaScript Method
Landscapedevice.landscape()
Portraitdevice.portrait()
Utility Methods
device.noConflict()
Run device.js in noConflict mode, returning the device variable to its previous owner.
Returns a reference to the device object.
vardevicejs=device.noConflict();
BEST PRACTICES
Environment detection has a high rate of misuse. Often times, folks will attempt to work around browser feature support problems by checking for the affected browser and doing something different in response. The preferred solution for those kinds of problems, of course, is to check for the feature, not the browser (ala Modernizr).
However, that common misuse of device detection doesn't mean it should never be done. For example, device.js could be employed to change the interface of your web app such that it uses interaction patterns and UI elements common to the device it's being presented on. Android devices might get a slightly different treatment than Windows or iOS, for instance. Another valid use-case is guiding users to different app stores depending on the device they're using.
In short, check for features when you need features, and check for the browser when you need the browser.
CONTRIBUTING
  1. Fork it
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Run grunt to automagically compile your changes (Grunt)
  4. Make changes to src/device.coffee
  5. Commit your changes (git commit -am 'Added some feature') - PLEASE DO NOT COMMITlib/*.js
  6. Push to the branch (git push origin my-new-feature)
  7. Create new Pull Request
About
Device.js makes it easy to write conditional CSS _and/or_ JavaScript based on device operating system (iOS, Android, Blackberry, Windows, Firefox OS, MeeGo), orientation (Portrait vs. Landscape), and type (Tablet vs. Mobile).
matthewhudson.me/projects/device.js/
Resources
Readme
MIT license
Activity
Stars
1 star
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
DEVICE.JS
Device.js makes it easy to write conditional CSS and/or JavaScript based on device operating system (iOS, Android, Blackberry, Windows, Firefox OS, MeeGo), orientation (Portrait vs. Landscape), and type (Tablet vs. Mobile).
View the Demo →
EXAMPLES
Device.js inserts CSS classes into the <html> element.
iPhone
Android Tablet
Blackberry Tablet
DEVICE SUPPORT
  • iOS: iPhone, iPod, iPad
  • Android: Phones & Tablets
  • Blackberry: Phones & Tablets
  • Windows: Phones & Tablets
  • Firefox OS: Phones & Tablets
USAGE
Just include the script. The script then updates the <html> section with the appropriate classes based on the device's characteristics.
<scriptsrc="device.js"></script>
CONDITIONAL CSS
The following tables map which CSS classes are added based on device and orientation.
Device CSS Class Names
DeviceCSS Classes
iPadios ipad tablet
iPhoneios iphone mobile
iPodios ipod mobile
Android Phoneandroid mobile
Android Tabletandroid tablet
BlackBerry Phoneblackberry mobile
BlackBerry Tabletblackberry tablet
Windows Phonewindows mobile
Windows Tabletwindows tablet
Firefox OS Phonefxos mobile
Firefox OS Tabletfxos tablet
MeeGomeego
Desktopdesktop
Orientation CSS Class Names
OrientationCSS Classes
Landscapelandscape
Portraitportrait
CONDITIONAL JAVASCRIPT
Device.js also includes support for conditional JavaScript, allowing you to write checks on the following device characteristics:
Device JavaScript Methods
DeviceJavaScript Method
Mobiledevice.mobile()
Tabletdevice.tablet()
iOSdevice.ios()
iPaddevice.ipad()
iPhonedevice.iphone()
iPoddevice.ipod()
Androiddevice.android()
Android Phonedevice.androidPhone()
Android Tabletdevice.androidTablet()
BlackBerrydevice.blackberry()
BlackBerry Phonedevice.blackberryPhone()
BlackBerry Tabletdevice.blackberryTablet()
Windowsdevice.windows()
Windows Phonedevice.windowsPhone()
Windows Tabletdevice.windowsTablet()
Firefox OSdevice.fxos()
Firefox OS Phonedevice.fxosPhone()
Firefox OS Tabletdevice.fxosTablet()
MeeGodevice.meego()
Orientation JavaScript Methods
OrientationJavaScript Method
Landscapedevice.landscape()
Portraitdevice.portrait()
Utility Methods
device.noConflict()
Run device.js in noConflict mode, returning the device variable to its previous owner.
Returns a reference to the device object.
vardevicejs=device.noConflict();
BEST PRACTICES
Environment detection has a high rate of misuse. Often times, folks will attempt to work around browser feature support problems by checking for the affected browser and doing something different in response. The preferred solution for those kinds of problems, of course, is to check for the feature, not the browser (ala Modernizr).
However, that common misuse of device detection doesn't mean it should never be done. For example, device.js could be employed to change the interface of your web app such that it uses interaction patterns and UI elements common to the device it's being presented on. Android devices might get a slightly different treatment than Windows or iOS, for instance. Another valid use-case is guiding users to different app stores depending on the device they're using.
In short, check for features when you need features, and check for the browser when you need the browser.
CONTRIBUTING
  1. Fork it
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Run grunt to automagically compile your changes (Grunt)
  4. Make changes to src/device.coffee
  5. Commit your changes (git commit -am 'Added some feature') - PLEASE DO NOT COMMITlib/*.js
  6. Push to the branch (git push origin my-new-feature)
  7. Create new Pull Request
About
Device.js makes it easy to write conditional CSS _and/or_ JavaScript based on device operating system (iOS, Android, Blackberry, Windows, Firefox OS, MeeGo), orientation (Portrait vs. Landscape), and type (Tablet vs. Mobile).
matthewhudson.me/projects/device.js/
Resources
Readme
MIT license
Activity
Stars
1 star
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
DEVICE.JS
Device.js makes it easy to write conditional CSS and/or JavaScript based on device operating system (iOS, Android, Blackberry, Windows, Firefox OS, MeeGo), orientation (Portrait vs. Landscape), and type (Tablet vs. Mobile).
View the Demo →
EXAMPLES
Device.js inserts CSS classes into the <html> element.
iPhone
Android Tablet
Blackberry Tablet
DEVICE SUPPORT
  • iOS: iPhone, iPod, iPad
  • Android: Phones & Tablets
  • Blackberry: Phones & Tablets
  • Windows: Phones & Tablets
  • Firefox OS: Phones & Tablets
USAGE
Just include the script. The script then updates the <html> section with the appropriate classes based on the device's characteristics.
<scriptsrc="device.js"></script>
CONDITIONAL CSS
The following tables map which CSS classes are added based on device and orientation.
Device CSS Class Names
DeviceCSS Classes
iPadios ipad tablet
iPhoneios iphone mobile
iPodios ipod mobile
Android Phoneandroid mobile
Android Tabletandroid tablet
BlackBerry Phoneblackberry mobile
BlackBerry Tabletblackberry tablet
Windows Phonewindows mobile
Windows Tabletwindows tablet
Firefox OS Phonefxos mobile
Firefox OS Tabletfxos tablet
MeeGomeego
Desktopdesktop
Orientation CSS Class Names
OrientationCSS Classes
Landscapelandscape
Portraitportrait
CONDITIONAL JAVASCRIPT
Device.js also includes support for conditional JavaScript, allowing you to write checks on the following device characteristics:
Device JavaScript Methods
DeviceJavaScript Method
Mobiledevice.mobile()
Tabletdevice.tablet()
iOSdevice.ios()
iPaddevice.ipad()
iPhonedevice.iphone()
iPoddevice.ipod()
Androiddevice.android()
Android Phonedevice.androidPhone()
Android Tabletdevice.androidTablet()
BlackBerrydevice.blackberry()
BlackBerry Phonedevice.blackberryPhone()
BlackBerry Tabletdevice.blackberryTablet()
Windowsdevice.windows()
Windows Phonedevice.windowsPhone()
Windows Tabletdevice.windowsTablet()
Firefox OSdevice.fxos()
Firefox OS Phonedevice.fxosPhone()
Firefox OS Tabletdevice.fxosTablet()
MeeGodevice.meego()
Orientation JavaScript Methods
OrientationJavaScript Method
Landscapedevice.landscape()
Portraitdevice.portrait()
Utility Methods
device.noConflict()
Run device.js in noConflict mode, returning the device variable to its previous owner.
Returns a reference to the device object.
vardevicejs=device.noConflict();
BEST PRACTICES
Environment detection has a high rate of misuse. Often times, folks will attempt to work around browser feature support problems by checking for the affected browser and doing something different in response. The preferred solution for those kinds of problems, of course, is to check for the feature, not the browser (ala Modernizr).
However, that common misuse of device detection doesn't mean it should never be done. For example, device.js could be employed to change the interface of your web app such that it uses interaction patterns and UI elements common to the device it's being presented on. Android devices might get a slightly different treatment than Windows or iOS, for instance. Another valid use-case is guiding users to different app stores depending on the device they're using.
In short, check for features when you need features, and check for the browser when you need the browser.
CONTRIBUTING
  1. Fork it
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Run grunt to automagically compile your changes (Grunt)
  4. Make changes to src/device.coffee
  5. Commit your changes (git commit -am 'Added some feature') - PLEASE DO NOT COMMITlib/*.js
  6. Push to the branch (git push origin my-new-feature)
  7. Create new Pull Request
About
Device.js makes it easy to write conditional CSS _and/or_ JavaScript based on device operating system (iOS, Android, Blackberry, Windows, Firefox OS, MeeGo), orientation (Portrait vs. Landscape), and type (Tablet vs. Mobile).
matthewhudson.me/projects/device.js/
Resources
Readme
MIT license
Activity
Stars
1 star
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
BranchesTags
Repository files navigation
DEVICE.JS
Device.js makes it easy to write conditional CSS and/or JavaScript based on device operating system (iOS, Android, Blackberry, Windows, Firefox OS, MeeGo), orientation (Portrait vs. Landscape), and type (Tablet vs. Mobile).
View the Demo →
EXAMPLES
Device.js inserts CSS classes into the <html> element.
iPhone
Android Tablet
Blackberry Tablet
DEVICE SUPPORT
  • iOS: iPhone, iPod, iPad
  • Android: Phones & Tablets
  • Blackberry: Phones & Tablets
  • Windows: Phones & Tablets
  • Firefox OS: Phones & Tablets
USAGE
Just include the script. The script then updates the <html> section with the appropriate classes based on the device's characteristics.
<scriptsrc="device.js"></script>
CONDITIONAL CSS
The following tables map which CSS classes are added based on device and orientation.
Device CSS Class Names
DeviceCSS Classes
iPadios ipad tablet
iPhoneios iphone mobile
iPodios ipod mobile
Android Phoneandroid mobile
Android Tabletandroid tablet
BlackBerry Phoneblackberry mobile
BlackBerry Tabletblackberry tablet
Windows Phonewindows mobile
Windows Tabletwindows tablet
Firefox OS Phonefxos mobile
Firefox OS Tabletfxos tablet
MeeGomeego
Desktopdesktop
Orientation CSS Class Names
OrientationCSS Classes
Landscapelandscape
Portraitportrait
CONDITIONAL JAVASCRIPT
Device.js also includes support for conditional JavaScript, allowing you to write checks on the following device characteristics:
Device JavaScript Methods
DeviceJavaScript Method
Mobiledevice.mobile()
Tabletdevice.tablet()
iOSdevice.ios()
iPaddevice.ipad()
iPhonedevice.iphone()
iPoddevice.ipod()
Androiddevice.android()
Android Phonedevice.androidPhone()
Android Tabletdevice.androidTablet()
BlackBerrydevice.blackberry()
BlackBerry Phonedevice.blackberryPhone()
BlackBerry Tabletdevice.blackberryTablet()
Windowsdevice.windows()
Windows Phonedevice.windowsPhone()
Windows Tabletdevice.windowsTablet()
Firefox OSdevice.fxos()
Firefox OS Phonedevice.fxosPhone()
Firefox OS Tabletdevice.fxosTablet()
MeeGodevice.meego()
Orientation JavaScript Methods
OrientationJavaScript Method
Landscapedevice.landscape()
Portraitdevice.portrait()
Utility Methods
device.noConflict()
Run device.js in noConflict mode, returning the device variable to its previous owner.
Returns a reference to the device object.
vardevicejs=device.noConflict();
BEST PRACTICES
Environment detection has a high rate of misuse. Often times, folks will attempt to work around browser feature support problems by checking for the affected browser and doing something different in response. The preferred solution for those kinds of problems, of course, is to check for the feature, not the browser (ala Modernizr).
However, that common misuse of device detection doesn't mean it should never be done. For example, device.js could be employed to change the interface of your web app such that it uses interaction patterns and UI elements common to the device it's being presented on. Android devices might get a slightly different treatment than Windows or iOS, for instance. Another valid use-case is guiding users to different app stores depending on the device they're using.
In short, check for features when you need features, and check for the browser when you need the browser.
CONTRIBUTING
  1. Fork it
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Run grunt to automagically compile your changes (Grunt)
  4. Make changes to src/device.coffee
  5. Commit your changes (git commit -am 'Added some feature') - PLEASE DO NOT COMMITlib/*.js
  6. Push to the branch (git push origin my-new-feature)
  7. Create new Pull Request
About
Device.js makes it easy to write conditional CSS _and/or_ JavaScript based on device operating system (iOS, Android, Blackberry, Windows, Firefox OS, MeeGo), orientation (Portrait vs. Landscape), and type (Tablet vs. Mobile).
matthewhudson.me/projects/device.js/
Resources
Readme
MIT license
Activity
Stars
1 star
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
DEVICE.JS
Device.js makes it easy to write conditional CSS and/or JavaScript based on device operating system (iOS, Android, Blackberry, Windows, Firefox OS, MeeGo), orientation (Portrait vs. Landscape), and type (Tablet vs. Mobile).
View the Demo →
EXAMPLES
Device.js inserts CSS classes into the <html> element.
iPhone
Android Tablet
Blackberry Tablet
DEVICE SUPPORT
  • iOS: iPhone, iPod, iPad
  • Android: Phones & Tablets
  • Blackberry: Phones & Tablets
  • Windows: Phones & Tablets
  • Firefox OS: Phones & Tablets
USAGE
Just include the script. The script then updates the <html> section with the appropriate classes based on the device's characteristics.
<scriptsrc="device.js"></script>
CONDITIONAL CSS
The following tables map which CSS classes are added based on device and orientation.
Device CSS Class Names
DeviceCSS Classes
iPadios ipad tablet
iPhoneios iphone mobile
iPodios ipod mobile
Android Phoneandroid mobile
Android Tabletandroid tablet
BlackBerry Phoneblackberry mobile
BlackBerry Tabletblackberry tablet
Windows Phonewindows mobile
Windows Tabletwindows tablet
Firefox OS Phonefxos mobile
Firefox OS Tabletfxos tablet
MeeGomeego
Desktopdesktop
Orientation CSS Class Names
OrientationCSS Classes
Landscapelandscape
Portraitportrait
CONDITIONAL JAVASCRIPT
Device.js also includes support for conditional JavaScript, allowing you to write checks on the following device characteristics:
Device JavaScript Methods
DeviceJavaScript Method
Mobiledevice.mobile()
Tabletdevice.tablet()
iOSdevice.ios()
iPaddevice.ipad()
iPhonedevice.iphone()
iPoddevice.ipod()
Androiddevice.android()
Android Phonedevice.androidPhone()
Android Tabletdevice.androidTablet()
BlackBerrydevice.blackberry()
BlackBerry Phonedevice.blackberryPhone()
BlackBerry Tabletdevice.blackberryTablet()
Windowsdevice.windows()
Windows Phonedevice.windowsPhone()
Windows Tabletdevice.windowsTablet()
Firefox OSdevice.fxos()
Firefox OS Phonedevice.fxosPhone()
Firefox OS Tabletdevice.fxosTablet()
MeeGodevice.meego()
Orientation JavaScript Methods
OrientationJavaScript Method
Landscapedevice.landscape()
Portraitdevice.portrait()
Utility Methods
device.noConflict()
Run device.js in noConflict mode, returning the device variable to its previous owner.
Returns a reference to the device object.
vardevicejs=device.noConflict();
BEST PRACTICES
Environment detection has a high rate of misuse. Often times, folks will attempt to work around browser feature support problems by checking for the affected browser and doing something different in response. The preferred solution for those kinds of problems, of course, is to check for the feature, not the browser (ala Modernizr).
However, that common misuse of device detection doesn't mean it should never be done. For example, device.js could be employed to change the interface of your web app such that it uses interaction patterns and UI elements common to the device it's being presented on. Android devices might get a slightly different treatment than Windows or iOS, for instance. Another valid use-case is guiding users to different app stores depending on the device they're using.
In short, check for features when you need features, and check for the browser when you need the browser.
CONTRIBUTING
  1. Fork it
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Run grunt to automagically compile your changes (Grunt)
  4. Make changes to src/device.coffee
  5. Commit your changes (git commit -am 'Added some feature') - PLEASE DO NOT COMMITlib/*.js
  6. Push to the branch (git push origin my-new-feature)
  7. Create new Pull Request
About
Device.js makes it easy to write conditional CSS _and/or_ JavaScript based on device operating system (iOS, Android, Blackberry, Windows, Firefox OS, MeeGo), orientation (Portrait vs. Landscape), and type (Tablet vs. Mobile).
matthewhudson.me/projects/device.js/
Resources
Readme
MIT license
Activity
Stars
1 star
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
DEVICE.JS
Device.js makes it easy to write conditional CSS and/or JavaScript based on device operating system (iOS, Android, Blackberry, Windows, Firefox OS, MeeGo), orientation (Portrait vs. Landscape), and type (Tablet vs. Mobile).
View the Demo →
EXAMPLES
Device.js inserts CSS classes into the <html> element.
iPhone
Android Tablet
Blackberry Tablet
DEVICE SUPPORT
  • iOS: iPhone, iPod, iPad
  • Android: Phones & Tablets
  • Blackberry: Phones & Tablets
  • Windows: Phones & Tablets
  • Firefox OS: Phones & Tablets
USAGE
Just include the script. The script then updates the <html> section with the appropriate classes based on the device's characteristics.
<scriptsrc="device.js"></script>
CONDITIONAL CSS
The following tables map which CSS classes are added based on device and orientation.
Device CSS Class Names
DeviceCSS Classes
iPadios ipad tablet
iPhoneios iphone mobile
iPodios ipod mobile
Android Phoneandroid mobile
Android Tabletandroid tablet
BlackBerry Phoneblackberry mobile
BlackBerry Tabletblackberry tablet
Windows Phonewindows mobile
Windows Tabletwindows tablet
Firefox OS Phonefxos mobile
Firefox OS Tabletfxos tablet
MeeGomeego
Desktopdesktop
Orientation CSS Class Names
OrientationCSS Classes
Landscapelandscape
Portraitportrait
CONDITIONAL JAVASCRIPT
Device.js also includes support for conditional JavaScript, allowing you to write checks on the following device characteristics:
Device JavaScript Methods
DeviceJavaScript Method
Mobiledevice.mobile()
Tabletdevice.tablet()
iOSdevice.ios()
iPaddevice.ipad()
iPhonedevice.iphone()
iPoddevice.ipod()
Androiddevice.android()
Android Phonedevice.androidPhone()
Android Tabletdevice.androidTablet()
BlackBerrydevice.blackberry()
BlackBerry Phonedevice.blackberryPhone()
BlackBerry Tabletdevice.blackberryTablet()
Windowsdevice.windows()
Windows Phonedevice.windowsPhone()
Windows Tabletdevice.windowsTablet()
Firefox OSdevice.fxos()
Firefox OS Phonedevice.fxosPhone()
Firefox OS Tabletdevice.fxosTablet()
MeeGodevice.meego()
Orientation JavaScript Methods
OrientationJavaScript Method
Landscapedevice.landscape()
Portraitdevice.portrait()
Utility Methods
device.noConflict()
Run device.js in noConflict mode, returning the device variable to its previous owner.
Returns a reference to the device object.
vardevicejs=device.noConflict();
BEST PRACTICES
Environment detection has a high rate of misuse. Often times, folks will attempt to work around browser feature support problems by checking for the affected browser and doing something different in response. The preferred solution for those kinds of problems, of course, is to check for the feature, not the browser (ala Modernizr).
However, that common misuse of device detection doesn't mean it should never be done. For example, device.js could be employed to change the interface of your web app such that it uses interaction patterns and UI elements common to the device it's being presented on. Android devices might get a slightly different treatment than Windows or iOS, for instance. Another valid use-case is guiding users to different app stores depending on the device they're using.
In short, check for features when you need features, and check for the browser when you need the browser.
CONTRIBUTING
  1. Fork it
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Run grunt to automagically compile your changes (Grunt)
  4. Make changes to src/device.coffee
  5. Commit your changes (git commit -am 'Added some feature') - PLEASE DO NOT COMMITlib/*.js
  6. Push to the branch (git push origin my-new-feature)
  7. Create new Pull Request
About
Device.js makes it easy to write conditional CSS _and/or_ JavaScript based on device operating system (iOS, Android, Blackberry, Windows, Firefox OS, MeeGo), orientation (Portrait vs. Landscape), and type (Tablet vs. Mobile).
matthewhudson.me/projects/device.js/
Resources
Readme
MIT license
Activity
Stars
1 star
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
BranchesTags
Repository files navigation
DEVICE.JS
Device.js makes it easy to write conditional CSS and/or JavaScript based on device operating system (iOS, Android, Blackberry, Windows, Firefox OS, MeeGo), orientation (Portrait vs. Landscape), and type (Tablet vs. Mobile).
View the Demo →
EXAMPLES
Device.js inserts CSS classes into the <html> element.
iPhone
Android Tablet
Blackberry Tablet
DEVICE SUPPORT
  • iOS: iPhone, iPod, iPad
  • Android: Phones & Tablets
  • Blackberry: Phones & Tablets
  • Windows: Phones & Tablets
  • Firefox OS: Phones & Tablets
USAGE
Just include the script. The script then updates the <html> section with the appropriate classes based on the device's characteristics.
<scriptsrc="device.js"></script>
CONDITIONAL CSS
The following tables map which CSS classes are added based on device and orientation.
Device CSS Class Names
DeviceCSS Classes
iPadios ipad tablet
iPhoneios iphone mobile
iPodios ipod mobile
Android Phoneandroid mobile
Android Tabletandroid tablet
BlackBerry Phoneblackberry mobile
BlackBerry Tabletblackberry tablet
Windows Phonewindows mobile
Windows Tabletwindows tablet
Firefox OS Phonefxos mobile
Firefox OS Tabletfxos tablet
MeeGomeego
Desktopdesktop
Orientation CSS Class Names
OrientationCSS Classes
Landscapelandscape
Portraitportrait
CONDITIONAL JAVASCRIPT
Device.js also includes support for conditional JavaScript, allowing you to write checks on the following device characteristics:
Device JavaScript Methods
DeviceJavaScript Method
Mobiledevice.mobile()
Tabletdevice.tablet()
iOSdevice.ios()
iPaddevice.ipad()
iPhonedevice.iphone()
iPoddevice.ipod()
Androiddevice.android()
Android Phonedevice.androidPhone()
Android Tabletdevice.androidTablet()
BlackBerrydevice.blackberry()
BlackBerry Phonedevice.blackberryPhone()
BlackBerry Tabletdevice.blackberryTablet()
Windowsdevice.windows()
Windows Phonedevice.windowsPhone()
Windows Tabletdevice.windowsTablet()
Firefox OSdevice.fxos()
Firefox OS Phonedevice.fxosPhone()
Firefox OS Tabletdevice.fxosTablet()
MeeGodevice.meego()
Orientation JavaScript Methods
OrientationJavaScript Method
Landscapedevice.landscape()
Portraitdevice.portrait()
Utility Methods
device.noConflict()
Run device.js in noConflict mode, returning the device variable to its previous owner.
Returns a reference to the device object.
vardevicejs=device.noConflict();
BEST PRACTICES
Environment detection has a high rate of misuse. Often times, folks will attempt to work around browser feature support problems by checking for the affected browser and doing something different in response. The preferred solution for those kinds of problems, of course, is to check for the feature, not the browser (ala Modernizr).
However, that common misuse of device detection doesn't mean it should never be done. For example, device.js could be employed to change the interface of your web app such that it uses interaction patterns and UI elements common to the device it's being presented on. Android devices might get a slightly different treatment than Windows or iOS, for instance. Another valid use-case is guiding users to different app stores depending on the device they're using.
In short, check for features when you need features, and check for the browser when you need the browser.
CONTRIBUTING
  1. Fork it
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Run grunt to automagically compile your changes (Grunt)
  4. Make changes to src/device.coffee
  5. Commit your changes (git commit -am 'Added some feature') - PLEASE DO NOT COMMITlib/*.js
  6. Push to the branch (git push origin my-new-feature)
  7. Create new Pull Request
About
Device.js makes it easy to write conditional CSS _and/or_ JavaScript based on device operating system (iOS, Android, Blackberry, Windows, Firefox OS, MeeGo), orientation (Portrait vs. Landscape), and type (Tablet vs. Mobile).
matthewhudson.me/projects/device.js/
Resources
Readme
MIT license
Activity
Stars
1 star
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors