Detect Device/Browser/Viewport Information – Device.js

Category: Javascript | May 4, 2021
Author: erovas
Views Total: 33 views
Official Page: Go to website
Last Update: May 4, 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
  • aspectRatio
  • 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 

// return: { angle: 0º, type: 'landscape-primary' }
Device.orientation

// address bar size { width, height }
Device.addressBarSize

// 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

// device's physical screen
Device.screenSize

// number of workers that the device has
Device.workers

Changelog:

05/05/2021

  • v1.1.0

You Might Be Interested In:


Leave a Reply