Detect Device/Browser/Viewport Information – Device.js

Preview:

Description:

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

Device Type:

• isMobile
• isTablet
• isDesktop

Viewport Size:

• Resolution
• screenViewport
• innerViewport
• outerViewport
• clientViewport
• availViewport
• Viewport height
• Viewport width

Address Bar:

• Width
• Height

Scrollbar:

• Width

Screen Size:

• Width
• Height
• Diagonal

Screen Orientation:

• Angle
• Type

Miscellaneous:

• pixelRatio
• isSafeConnection
• isFullscreen
• isPortrait
• isLandscape
• workers

How to use it:

1. Import the Device.js JavaScript library into the document.

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

// OR
import "Device.min.js";

2. API methods & properties.

// check if is browser
// return true or false
Device.isMobile
// check if is tablet
// return true or false
Device.isTablet
// check if is desktop
// return true or false
Device.isDesktop
// check if the connection is safe (SSL)
// return true or false
Device.isSafeConnection
// check if is fullscreen mode
// return true or false 
Device.isFullScreen
// check if is landscape
// return true or false 
Device.isLandscape
// check if is portrait
// return true or false 
Device.isPortrait 
// check if is touch screen
// return true or false 
Device.isTouchScreen
// check if is dark mode
// return true or false 
Device.isDarkMode
// return: { angle: 0º, type: 'landscape-primary' }
Device.orientation
// address bar size { width, height }
Device.addressBar
// returns an object of the form { X: { width, height, position, maxPosition }, Y:{ width, height, position, maxPosition } } all of them in pixels
Device.scrollBar
// pixel ratio of the browser
Device.pixelRatio
// the real resolution of the device screen
// return: { width, height }
Device.resolution
// return: { width, height }
Device.screenViewport
// return: { width, height }
Device.innerViewport
// return: { width, height }
Device.outerViewport
// return: { width, height }
Device.clientViewport 
// return: { width, height }
Device.availViewport
// height of the innerViewport
Device.vh
// width of the innerViewport
Device.vW
// number of workers that the device has
Device.workers
// number of touch points
Device.touchPoints
// return the name and version of the operating system
Device.OS
// return the name and version of the browser
Device.browser
// return the name of the CPU
Device.CPU

Changelog:

v1.2.3 (08/20/2021)

• Bugfix

v1.2.2 (08/16/2021)

• Added isDarkMode
• Added orientation polyfill

v1.2.1 (08/09/2021)

• acurate orientation Polyfill for IE and iOS

v1.2.0 (07/28/2021)

• Added: isTouchScreen, touchPoints, CPU, OS, browser
• Deleted: screenSize

v1.1.0 (05/05/2021)

• Deleted: openFullScreen(), closeFullScreen(), fullScreen(), and aspectRatio