{"id":3206,"date":"2017-01-27T10:06:41","date_gmt":"2017-01-27T10:06:41","guid":{"rendered":"http:\/\/www.jquery-az.com\/?p=3206"},"modified":"2023-09-24T14:19:09","modified_gmt":"2023-09-24T14:19:09","slug":"javascript-device-detection-windows-android-ios-portrait-landscape-etc","status":"publish","type":"post","link":"https:\/\/www.jquery-az.com\/javascript-device-detection-windows-android-ios-portrait-landscape-etc\/","title":{"rendered":"JavaScript device detection: Windows, android, iOS, portrait, landscape etc."},"content":{"rendered":"

A JavaScript solution for device detection – OS, orientation, and type<\/strong><\/h3>\n

As more and more visitors are moving to smartphones \/ mobiles for visiting the websites, it has become important to adjust your website according to the device of the visitors. For instance, the way your desktop version of the website is presenting the information and different components, it should be presented in the smart phones or tablets properly, as well.<\/p>\n

For that, you may need to change the CSS or other settings in order to make sure the website adjusts in the viewport and horizontal scrollbar does not appear. The HTML table width, columns etc should be adjusted and so on.<\/p>\n

One such solution is using the responsive framework like Bootstrap <\/a>that adjusts automatically with respect to the user\u2019s device by using its powerful grid system.<\/p>\n

The other solution can be detecting the user\u2019s device, operating system, and screen orientation and presenting the website based on that basis.<\/p>\n

In this tutorial, I am going to share a simple and light-weight JavaScript plug-in that detects user device; whether it is a desktop, mobile or tablet? It also detects the orientation i.e. portrait or landscape. The plug-in can also detect the operating system of the device including windows, android, iOS, television etc.<\/p>\n

A demo of using the device.js plug-in<\/strong><\/h3>\n

As you open the demo page in any device, it will highlight your device type and orientation. Have a look by clicking the link or image below:<\/p>\n

\"JavaScript<\/p>\n

See online demo and code<\/strong><\/h6>\n

As I ran this code on the desktop device for this demo, so it displayed desktop with landscape orientation.<\/p>\n

A demo of running device detection plug-in in a smart phone<\/strong><\/h3>\n

This time, I executed this code in a smartphone with android OS. The orientation is portrait. See the graphic below to get the idea or run the demo on a smartphone or tablet:<\/p>\n

\"JavaScript<\/p>\n

How to use this device.js plug-in?<\/strong><\/h3>\n

You may download the plug-in from the link given below:<\/p>\n

Credit: matthewhudson<\/a><\/p>\n

Direct download: zip file<\/a> (from Github website)<\/p>\n

After downloading, extract the file and get the device.js file from lib folder. Place it in the desired location and refer it on the web page before the <\/body> closing tag.<\/p>\n

A little JavaScript code is also required that you may get from the demo page\u2019s code section.<\/p>\n

You may program to use different CSS and JavaScript for different devices, operating systems, and orientation. You have to go through the device.js file in order to accomplish it.<\/p>\n

Basically, the device.js inserts the classes according to the device in the <html> tag. For complete details, go the developer\u2019s page by using the above link.<\/p>\n","protected":false},"excerpt":{"rendered":"

A JavaScript solution for device detection – OS, orientation, and type As more and more visitors are moving to smartphones \/ mobiles for visiting the websites, it has become important to adjust your website according to the device of the visitors. For instance, the way your desktop version of the website is presenting the information … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":3208,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[14],"tags":[43],"yoast_head":"\nJavaScript device detection: Windows, android, iOS, portrait, landscape etc.<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.jquery-az.com\/javascript-device-detection-windows-android-ios-portrait-landscape-etc\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript device detection: Windows, android, iOS, portrait, landscape etc.\" \/>\n<meta property=\"og:description\" content=\"A JavaScript solution for device detection – OS, orientation, and type As more and more visitors are moving to smartphones \/ mobiles for visiting the websites, it has become important to adjust your website according to the device of the visitors. For instance, the way your desktop version of the website is presenting the information ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jquery-az.com\/javascript-device-detection-windows-android-ios-portrait-landscape-etc\/\" \/>\n<meta property=\"article:published_time\" content=\"2017-01-27T10:06:41+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-09-24T14:19:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2017\/01\/19.0_2-JavaScript-detect-device-mobile.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"266\" \/>\n\t<meta property=\"og:image:height\" content=\"543\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"jqueryaz\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"jqueryaz\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jquery-az.com\/javascript-device-detection-windows-android-ios-portrait-landscape-etc\/\",\"url\":\"https:\/\/www.jquery-az.com\/javascript-device-detection-windows-android-ios-portrait-landscape-etc\/\",\"name\":\"JavaScript device detection: Windows, android, iOS, portrait, landscape etc.\",\"isPartOf\":{\"@id\":\"https:\/\/www.jquery-az.com\/#website\"},\"datePublished\":\"2017-01-27T10:06:41+00:00\",\"dateModified\":\"2023-09-24T14:19:09+00:00\",\"author\":{\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jquery-az.com\/javascript-device-detection-windows-android-ios-portrait-landscape-etc\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jquery-az.com\/javascript-device-detection-windows-android-ios-portrait-landscape-etc\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jquery-az.com\/javascript-device-detection-windows-android-ios-portrait-landscape-etc\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.jquery-az.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript device detection: Windows, android, iOS, portrait, landscape etc.\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jquery-az.com\/#website\",\"url\":\"https:\/\/www.jquery-az.com\/\",\"name\":\"\",\"description\":\"PHP, Bootstrap, jQuery, CSS, Python, Java and others\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jquery-az.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\",\"name\":\"jqueryaz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"caption\":\"jqueryaz\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JavaScript device detection: Windows, android, iOS, portrait, landscape etc.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.jquery-az.com\/javascript-device-detection-windows-android-ios-portrait-landscape-etc\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript device detection: Windows, android, iOS, portrait, landscape etc.","og_description":"A JavaScript solution for device detection – OS, orientation, and type As more and more visitors are moving to smartphones \/ mobiles for visiting the websites, it has become important to adjust your website according to the device of the visitors. For instance, the way your desktop version of the website is presenting the information ... Read more","og_url":"https:\/\/www.jquery-az.com\/javascript-device-detection-windows-android-ios-portrait-landscape-etc\/","article_published_time":"2017-01-27T10:06:41+00:00","article_modified_time":"2023-09-24T14:19:09+00:00","og_image":[{"width":266,"height":543,"url":"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2017\/01\/19.0_2-JavaScript-detect-device-mobile.jpg","type":"image\/jpeg"}],"author":"jqueryaz","twitter_misc":{"Written by":"jqueryaz","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jquery-az.com\/javascript-device-detection-windows-android-ios-portrait-landscape-etc\/","url":"https:\/\/www.jquery-az.com\/javascript-device-detection-windows-android-ios-portrait-landscape-etc\/","name":"JavaScript device detection: Windows, android, iOS, portrait, landscape etc.","isPartOf":{"@id":"https:\/\/www.jquery-az.com\/#website"},"datePublished":"2017-01-27T10:06:41+00:00","dateModified":"2023-09-24T14:19:09+00:00","author":{"@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3"},"breadcrumb":{"@id":"https:\/\/www.jquery-az.com\/javascript-device-detection-windows-android-ios-portrait-landscape-etc\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jquery-az.com\/javascript-device-detection-windows-android-ios-portrait-landscape-etc\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.jquery-az.com\/javascript-device-detection-windows-android-ios-portrait-landscape-etc\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.jquery-az.com\/"},{"@type":"ListItem","position":2,"name":"JavaScript device detection: Windows, android, iOS, portrait, landscape etc."}]},{"@type":"WebSite","@id":"https:\/\/www.jquery-az.com\/#website","url":"https:\/\/www.jquery-az.com\/","name":"","description":"PHP, Bootstrap, jQuery, CSS, Python, Java and others","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jquery-az.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3","name":"jqueryaz","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","caption":"jqueryaz"}}]}},"_links":{"self":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/3206"}],"collection":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/comments?post=3206"}],"version-history":[{"count":1,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/3206\/revisions"}],"predecessor-version":[{"id":9847,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/3206\/revisions\/9847"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media\/3208"}],"wp:attachment":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media?parent=3206"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/categories?post=3206"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/tags?post=3206"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}