Device.js is a JavaScript library to detect device, viewport, and browser information using plain JavaScript.

Overview

Device.js

Device.js is a JavaScript library to detect device, viewport, and browser information using plain JavaScript.

Compatibility

  • Works with all modern browsers from IE9+.

How to use it?

Import the Device.js JavaScript library wherever you want into the document before using it.

<script src="Device.min.js"></script>
<script>
    console.log(Device.isMobile);
</script>

or

<script defer src="Device.min.js"></script>
<script defer src="otherScript.js"></script>

or

<script type="module" src="Device.min.js"></script>
<script type="module" src="otherScript.js"></script>

or

<script type="module">
    import "Device.min.js";
    console.log(Device.isMobile);
</script>

API

Property Description
isMobile true if the device is mobile or tablet type
isTablet true if the device is a tablet
isDesktop true if the device is a desktop
isSafeConnection true if the connection is HTTPS or FILE protocol
isFullScreen true if the device is in full screen mode
isLandscape true if the device is in landscape screen mode
isPortrait true if the device is in portrait screen mode
isTouchScreen true if the device has touch screen
isDarkMode true if the device browser is in Dark mode
isLightMode true if the device browser is in Light mode
orientation returns an object of the form { angle: 0º, type: 'landscape-primary' } where "angle" is the angle of the browser, "type" the orientation type name
addressBar returns an object of the form { width, height } which are the numerical values in pixels of the browser's address bar
scrollBar returns an object of the form { X: { width, height, position, maxPosition }, Y:{ width, height, position, maxPosition } } all of them in pixels
pixelRatio returns the pixel ratio of the browser
resolution returns an object of the form { width, height } which are the numerical values in pixels of the real resolution of the device screen
screenViewport returns an object of the form { width, height } which are the numerical values in pixels that the browser has
innerViewport returns an object of the form { width, height } which are the numerical values in pixels that the browser has to render content
outerViewport returns an object of the form { width, height } which are the numerical values in pixels of which the browser is currently occupying
clientViewport returns an object of the form { width, height } which are the numerical values in pixels of which is the rendered size that the user can see on the screen
availViewport returns an object of the form { width, height } which are the numerical values in pixels which is the viewport available for rendering
vh returns a numeric value that is 1% of the height of the innerViewport
vW returns a numeric value that is 1% of the width of the innerViewport
workers returns a number that is the number of workers that the device has
touchPoints returns a number that is the number touch points the device has
OS returns an object of the form { name, version } which are the name and version of operating system
browser returns an object of the form { name, major, version } which are the name and version of browser
CPU returns a number that is the CPU architecture

Changelog

Version 1.2.3 - new property

Added

  • isLightMode

Version 1.2.2 - new property, accurate polyfill

Added:

  • isDarkMode

Polyfill:

  • orientation

Version 1.2.0 - new properties

Added:

  • isTouchScreen
  • touchPoints
  • CPU
  • OS
  • browser

Deleted:

  • screenSize

You can find the Version 1.1.0 in 'old-version-1.1.0' folder in this repository.

Version 1.1.0 - Refactoring

Deleted:

  • openFullScreen()
  • closeFullScreen()
  • fullScreen()
  • aspectRatio

Modified: -addressBarSize TO addressBar -scrollBarWidth TO scrollBar

You can find the Version 1.0.0 in 'old-version' folder in this repository.

Demo

https://erovas.github.io/Device.js/

Authors

  • Emanuel Rojas Vásquez - Initial work - erovas

License

This project is licensed under the BSD 3-Clause License - see the LICENSE file for details.

Spanish - Español

Device.js

Device.js es una libreria JavaScript para detectar el dispositivo, viewport e informacion del browser usando vanilla JavaScript.

Compatibilidad

  • Funciona con todos los navegadores modernos desde IE9+.

¿Cómo utilizarlo?

Importar la libreria Device.js en cualquier parte dentro del documento antes de utilizarlo.

<script src="Device.min.js"></script>
<script>
    console.log(Device.isMobile);
</script>

or

<script defer src="Device.min.js"></script>
<script defer src="otherScript.js"></script>

or

<script type="module" src="Device.min.js"></script>
<script type="module" src="otherScript.js"></script>

or

<script type="module">
    import "Device.min.js";
    console.log(Device.isMobile);
</script>

API

Propiedad Descripción
isMobile true si el dispositivo es de tipo móvil o tablet
isTablet true si el dispositivo es de tipo tablet
isDesktop true si el dispositivo es de tipo escritorio
isSafeConnection true si la conexión es de protocolo HTTPS o FILE
isFullScreen true si el dispositivo está en modo pantalla completa
isLandscape true si el dispositivo está en modo pantalla landscape
isPortrait true si el dispositivo está en modo pantalla portrait
isTouchScreen true si el dispositivo tiene una pantalla tactil
isDarkMode true si el browser del dispositivo está en modo oscuro
isLightMode true si el browser del dispositivo está en modo claro
orientation devuelve un objeto de la forma { angle: 0º, type: 'landscape-primary' } en donde "angle" es el angulo que tiene el navegador, "type" el nombre de tipo de orientación
addressBar devuelve un objeto de la forma { width, height } el cual son los valores numericos en pixeles de la barra de direcciones del navegador
scrollBar devuelve un objeto de la forma { X: { width, height, position, maxPosition }, Y:{ width, height, position, maxPosition } } todos ellos en píxeles
pixelRatio devuelve el pixel ratio del navegador
resolution devuelve un objeto de la forma { width, height } el cual son los valores numericos en pixeles de la resolución real de la pantalla del dispositivo
screenViewport devuelve un objeto de la forma { width, height } el cual son los valores numericos en pixeles del cual el navegador dispone
innerViewport devuelve un objeto de la forma { width, height } el cual son los valores numericos en pixeles del cual el navegador dispone para renderizar contenido
outerViewport devuelve un objeto de la forma { width, height } el cual son los valores numericos en pixeles del cual el navegador está ocupando actualmente
clientViewport devuelve un objeto de la forma { width, height } el cual son los valores numericos en pixeles del cual es el tamaño renderizado que el usuario puede observar en pantalla
availViewport devuelve un objeto de la forma { width, height } el cual son los valores numericos en pixeles el cual es el viewport disponible para renderizar
vh devuelve un valor numerico que es el 1% del alto del innerViewport
vW devuelve un valor numerico que es el 1% del ancho del innerViewport
workers devuelve un numero que es la cantidad de workers que posee el dispositivo
touchPoints devuelve un numero que es la cantidad de puntos tactiles que posee el dispositivo
OS devuelve un objeto de la forma { name, version } el cual es el nombre y version del sistema operativo
browser devuelve un objeto de la forma { name, major, version } el cual es el nombre y version del navegador
CPU devuelve un numero que es la arquitectura del CPU

Registro de cambios

Version 1.2.3 - nueva propiedad

Agregado

  • isLightMode

Version 1.2.2 - nueva propiedad, polyfill preciso

Agregado:

  • isDarkMode

Polyfill:

  • orientation

Version 1.2.0 - nuevas propiedades

Agregado:

  • isTouchScreen
  • touchPoints
  • CPU
  • OS
  • browser

Eliminado:

  • screenSize

Puede encontrar la Versión 1.1.0 en la carpeta 'old-version-1.1.0' en este repositorio.

Version 1.1.0 - Refactorzación

Eliminado:

  • openFullScreen()
  • closeFullScreen()
  • fullScreen()
  • aspectRatio

Modificado:

  • addressBarSize A addressBar
  • scrollBarWidth A scrollBar

Puede encontrar la Versión 1.0.0 en la carpeta 'old-version' en este repositorio.

Demo

https://erovas.github.io/Device.js/

Autores

  • Emanuel Rojas Vásquez - Initial work - erovas

Licencia

Este proyecto está licenciado bajo Licencia BSD 3-Clause - ver el archivo LICENCIA para mas detalles.

You might also like...

Simple format that serves it's one and only purpose and that's creating simple task list everywhere where you can write plain text

Simple format that serves it's one and only purpose and that's creating simple task list everywhere where you can write plain text

SWTF (Simple Worklog Task Format) Simple format that serves it's one and only purpose and that's creating simple task list everywhere where you can wr

Apr 4, 2022

Cross platform UI controls for progressive web and hybrid apps (plain JS, jQuery, Angular and React)

Cross platform UI controls for progressive web and hybrid apps (plain JS, jQuery, Angular and React)

Mobiscroll What is Mobiscroll? Mobiscroll is a UI library for progressive webapps and hybrid development. Created with a lot of attention to usability

Dec 31, 2022

Examples of how to do query, style, dom, ajax, event etc like jQuery with plain javascript.

You (Might) Don't Need jQuery Frontend environments evolve rapidly nowadays and modern browsers have already implemented a great deal of DOM/BOM APIs

Dec 24, 2022

Awesome books: plain JavaScript with objects

Awesome books: plain JavaScript with objects Awesome books is an online book store. It's built with HTML, CSS and mostly JS based on a medium-fidelity

Aug 30, 2022

Syncronize a YJS document to/from a plain old javascript object

y-pojo Syncronize a YJS document to/from a plain old javascript object This library enables multiple users to share state in the form of a Plain ol' J

Nov 12, 2022

Plain JavaScript version of jQuery's slideToggle(), slideDown(), & slideUp(), but does not use display: none.

dom-slider It works like jQuery's slideToggle(), slideDown(), & slideUp(), but does not use display: none. Uses CSS3 transitions and element.scrollHei

Dec 27, 2022

Detect webpage updates and notify user to reload. support vite and umijs

English | 简体中文 plugin-web-update-notification Detect webpage updates and notify user to reload. support vite and umijs. Take the git commit hash as th

Dec 26, 2022

Detect the current Bootstrap breakpoint in JavaScript

bootstrap-detect-breakpoint Detect the current Bootstrap breakpoint in JavaScript. Demo Page npm Package Usage Include the bootstrap-detect-breakpoint

Nov 7, 2022

Use plain functions as modifiers. Polyfill for RFC: 757 | Default Modifier Manager

Use plain functions as modifiers. Polyfill for RFC: 757 | Default Modifier Manager

Jan 14, 2022
Owner
Emanuel R. Vásquez
I'm ready for whatever challenges!
Emanuel R. Vásquez
UAParser.js - Detect Browser, Engine, OS, CPU, and Device type/model from User-Agent data. Supports browser & node.js environment.

UAParser.js JavaScript library to detect Browser, Engine, OS, CPU, and Device type/model from User-Agent data with relatively small footprint (~17KB m

Faisal Salman 7.4k Jan 4, 2023
A lightweight extension to automatically detect and provide verbose warnings for embedded iframe elements in order to protect against Browser-In-The-Browser (BITB) attacks.

Enhanced iFrame Protection - Browser Extension Enhanced iFrame Protection (EIP) is a lightweight extension to automatically detect and provide verbose

odacavo 16 Dec 24, 2022
Browser In The Browser (BITB) attack is a sophisticated phishing and hard to detect.

BITB Browser In The Browser (BITB) attack is a sophisticated phishing and hard to detect. Goto: ?? MacOS-Chrome-DarkMode ?? MacOS-Chrome-LightMode ??

Lục Thiên Phong 18 Dec 4, 2022
Detect browser, and render view according to the detected browser type.

react-browser-detector Detect browser, and render view according to the detected browser type. Installation To install, you can use npm or yarn: npm i

kirillsaint 5 Jul 13, 2022
A ScrollSpy library for detecting enter/exit of elements in the viewport when the user scrolls

jquery-scrollspy A jQuery plugin for detecting enter/exit of elements in the viewport when the user scrolls. New Features Added a couple new features:

John Smart 276 Jul 1, 2022
Lazyload images, iframes or any src* element until they are visible in the viewport.

Lazyload images, iframes or any src* element until they are visible in the viewport.

Vincent Voyer 938 Nov 15, 2022
Detect Kakaotalk in-app browser

Detect Kakaotalk in-app browser Languages 한국어 | English Introduce I'm so tired by the in-app browser. Install npm i detect-kakaotalk-in-app-browser #

Juunini (쥬니니) 16 Sep 1, 2022
The Main Purpose The main purpose of creating an anaonline information system, as an effort responsive to the management of the data of the Members of the Persis Youth based on information technology systems

landing-page-pp landing-page-pp.vercel.app #The Main Purpose The main purpose of creating an anaonline information system, as an effort responsive to

Hilman Firdaus 6 Oct 21, 2022
This project will be using various AI and Rule Engine algorithm to detect various attack against a company!

?? Introduction This project will be using various AI and Rule Engine algorithm to detect various attack against a website! ?? Mission After starting

Harish S.G 4 Apr 29, 2022
Linkify is a JavaScript plugin for finding links in plain-text and converting them to HTML tags.

Linkify Linkify is a JavaScript plugin. Use Linkify to find links in plain-text and convert them to HTML <a> tags. It automatically highlights URLs, #

Hypercontext 1.5k Dec 27, 2022