Detect Device/Browser/Viewport Information – Device.js

Category: Javascript | August 20, 2021
Author:erovas
Views Total:609 views
Official Page:Go to website
Last Update:August 20, 2021
License:BSD 3-Clause

Preview:

Detect Device/Browser/Viewport Information – Device.js

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

You Might Be Interested In:


One thought on “Detect Device/Browser/Viewport Information – Device.js

Leave a Reply