{"id":22160360,"url":"https://github.com/rozek/svelte-device-info","last_synced_at":"2025-07-30T17:10:02.201Z","repository":{"id":57375189,"uuid":"373752278","full_name":"rozek/svelte-device-info","owner":"rozek","description":"informs about a device's form factor and pointing accuracy (not only for Svelte)","archived":false,"fork":false,"pushed_at":"2024-09-13T19:27:15.000Z","size":136,"stargazers_count":30,"open_issues_count":3,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-07-18T16:34:24.002Z","etag":null,"topics":["form-factor","mobile","phone","resolution-touch","tablet"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rozek.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-06-04T07:06:10.000Z","updated_at":"2025-06-02T05:31:13.000Z","dependencies_parsed_at":"2025-05-13T07:32:43.151Z","dependency_job_id":null,"html_url":"https://github.com/rozek/svelte-device-info","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/rozek/svelte-device-info","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rozek%2Fsvelte-device-info","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rozek%2Fsvelte-device-info/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rozek%2Fsvelte-device-info/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rozek%2Fsvelte-device-info/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rozek","download_url":"https://codeload.github.com/rozek/svelte-device-info/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rozek%2Fsvelte-device-info/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267906991,"owners_count":24164183,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-30T02:00:09.044Z","response_time":70,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["form-factor","mobile","phone","resolution-touch","tablet"],"created_at":"2024-12-02T04:07:33.226Z","updated_at":"2025-07-30T17:10:02.166Z","avatar_url":"https://github.com/rozek.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# svelte-device-info #\n\ninforms about a device's form factor and pointing accuracy (not only in Svelte)\n\n**NPM users**: please consider the [Github README](https://github.com/rozek/svelte-device-info/blob/main/README.md) for the latest description of this package (as updating the docs would otherwise always require a new NPM package version)\n\nNote: Microsoft Internet Explorer and Microsoft Edge (classic) are NOT supported\n\n\u003e Just a small note: if you like this module and plan to use it, consider \"starring\" this repository (you will find the \"Star\" button on the top right of this page), so that I know which of my repositories to take most care of.\n\n## Installation ##\n\n`svelte-device-info` may be used as an ECMAScript module (ESM), a CommonJS or AMD module or from a global variable.\n\nYou may either install the package into your build environment using [NPM](https://docs.npmjs.com/) with the command\n\n```\nnpm install svelte-device-info\n```\n\nor load the plain script file directly\n\n```html\n\u003cscript src=\"https://unpkg.com/svelte-device-info\"\u003e\u003c/script\u003e\n```\n\n## Access ##\n\nHow to access the package depends on the type of module you prefer\n\n* ESM (or Svelte): `import Device from 'svelte-device-info'`\n* CommonJS: `const Device = require('svelte-device-info')`\n* AMD: `require(['svelte-device-info'], (Device) =\u003e {...})`\n\nAlternatively, you may access the global variable `Device` directly.\n\nNote for ECMAScript module users: all module functions and values are exported individually, thus allowing your bundler to perform some \"tree-shaking\" in order to include actually used functions or values (together with their dependencies) only.\n\n## Usage within Svelte ##\n\nFor Svelte, it is recommended to import the package in a module context:\n\n```html\n\u003cscript context=\"module\"\u003e\n  import Device from 'svelte-device-info'\n\u003c/script\u003e\n\n\u003cscript\u003e\n  console.log('this device is ' + (Device.isMobile ? '' : 'not') + ' mobile')\n  \n  switch (true) {\n    case Device.isPhone:  console.log('this device is a smartphone'); break\n    case Device.isTablet: console.log('this device is a tablet');     break\n    default:              console.log('this device is neither a smartphone nor a tablet')\n  }\n    \n  console.log('the primary pointing device can' + (\n    Device.canHover ? '' : 'not'\n  ) + ' \"hover\" over elements')\n\n  switch (Device.PointingAccuracy) {\n    case 'none':   console.log('this device does not support any touch input'); break\n    case 'fine':   console.log('this device has a high-resolution touch input'); break\n    case 'coarse': console.log('this device has a low-resolution touch input')\n  }\n  \n/**** convertibles may change their PointingAccuracy at any time! ****/\n  \n  let PointingAccuracyObserver = function (newAccuracy) {\n    console.log('this device\\'s PointingAccuracy is now \"' + newAccuracy + '\"')\n  }\n  \n  Device.onPointingAccuracyChanged(PointingAccuracyObserver) // may run multiple times\n  Device.offPointingAccuracyChanged(PointingAccuracyObserver)   // deregisters handler\n\n  Device.oncePointingAccuracyChanged((newAccuracy) =\u003e {\n    console.log('PointingAccuracy has changed to \"' + newAccuracy + '\"')\n  })\n\u003c/script\u003e\n```\n\n## Usage as ECMAscript, CommonJS or AMD Module (or as a global Variable) ##\n\nLet's assume that you already \"required\" or \"imported\" (or simply loaded) the module according to your local environment. In that case, you may use it as follows:\n\n```javascript\n  console.log('this device is ' + (Device.isMobile ? '' : 'not') + ' mobile')\n  \n  switch (true) {\n    case Device.isPhone:  console.log('this device is a smartphone'); break\n    case Device.isTablet: console.log('this device is a tablet');     break\n    default:              console.log('this device is neither a smartphone nor a tablet')\n  }\n  \n  console.log('the primary pointing device can' + (\n    Device.canHover ? '' : 'not'\n  ) + ' \"hover\" over elements')\n  \n  switch (Device.PointingAccuracy) {\n    case 'none':   console.log('this device does not support any touch input'); break\n    case 'fine':   console.log('this device has a high-resolution touch input'); break\n    case 'coarse': console.log('this device has a low-resolution touch input')\n  }\n  \n/**** convertibles may change their PointingAccuracy at any time! ****/\n  \n  let PointingAccuracyObserver = function (newAccuracy) {\n    console.log('this device\\'s PointingAccuracy is now \"' + newAccuracy + '\"')\n  }\n  \n  Device.onPointingAccuracyChanged(PointingAccuracyObserver) // may run multiple times\n  Device.offPointingAccuracyChanged(PointingAccuracyObserver)   // deregisters handler\n\n  Device.oncePointingAccuracyChanged((newAccuracy) =\u003e {\n    console.log('PointingAccuracy has changed to \"' + newAccuracy + '\"')\n  })\n```\n\n## Examples ##\n\nAll examples are available on the Svelte REPL - feel free to play with them!\n\n* [Device.isXXX](https://svelte.dev/repl/f8227376829d46e9bedeb9d9a1dacdb2) - DeviceIsMobile, DeviceIsPhone, DeviceIsTablet\n* [Device.canHover](https://svelte.dev/repl/8f3cf8e46d8346a2a0b776ef189d63bf) - including observation at run-time\n* [Device.PointingAccuracy](https://svelte.dev/repl/24578e134a68443da9dc84adf3ae729b) - including observation at run-time\n\n## Background Information ##\n\nThis package determines a few often needed details of the underlying device running a given JavaScript application:\n\n* is the device a mobile one? a smartphone? a tablet?\n* is the device's primary input device a touch pad or touch screen? does that input device have a low or a high resolution?\n\nIn addition, the package informs the application about any change in touch input resolution (which is important for \"convertibles\" that may switch between notebook and tablet mode)\n\nThe package's finding may either be retrieved using JavaScript or by styling a few CSS classes which are added to or removed from the document body depending on the current PointingAccuracy.\n\n### JavaScript API ###\n\nThis package offers a JavaScript `default` export, which may be imported as follows\n\n  `import Device from 'svelte-device-info'`\n\nWith such an import, the JavaScript API can be used as follows:\n\n* **`Device.isMobile`** - is `true` if the underlying device is a mobile one (or `false` otherwise)\n* **`Device.isPhone`** - is `true` if the underlying device is a smartphone (or `false` otherwise)\n* **`Device.isTablet`** - is `true` if the underlying device is a tablet (or `false` otherwise)\n\n\u003e Nota bene: the reported device factor may be wrong for mobile devices if their browsers have been configured to act like desktop browsers!\n\n* **`Device.canHover`** - is `true` if the primary pointing device can \"hover\" over elements (or `false` otherwise)\u003cbr\u003e\u0026nbsp;\u003cbr\u003e\n* **`Device.PointingAccuracy`** - determines the current pointing accuracy of the underlying input device\n  * **`none`** - indicates the absence of any touch input device\n  * **`fine`** - indicates the presence of a high-resolution touch input device\n  * **`coarse`** - indicates the presence of a low-resolution touch input device\u003cbr\u003e\u0026nbsp;\u003cbr\u003e\n* **`Device.onPointingAccuracyChanged(callback)`** - installs a `callback` function which is automatically invoked, whenever the device's `PointingAccuracy` has changed\n* **`Device.oncePointingAccuracyChanged(callback)`** - installs a `callback` function which is automatically invoked *once*, when the device's PointingAccuracy has changed\n* **`Device.offPointingAccuracyChanged(callback)`** - uninstalls a previously installed `callback` function\u003cbr\u003e\u0026nbsp;\u003cbr\u003e\n* **`Device.observesPointingAccuracy`** - is `true` while there is at least one `callback` function observing the current `PointingAccuracy` (or `false` otherwise)\n\n### CSS Classes ###\n\nThe following CSS classes are added to `document.body` depending on the current `PoiningAccuracy`\n\n* **`noPointer`** - indicates the absence of any touch input device\n* **`finePointer`** - indicates the presence of a high-resolution touch input device\n* **`coarsePointer`** - indicates the presence of a low-resolution touch input device\n\n## Build Instructions ##\n\nYou may easily build this package yourself.\n\nJust install [NPM](https://docs.npmjs.com/) according to the instructions for your platform and follow these steps:\n\n1. either clone this repository using [git](https://git-scm.com/) or [download a ZIP archive](https://github.com/rozek/svelte-device-info/archive/refs/heads/main.zip) with its contents to your disk and unpack it there \n2. open a shell and navigate to the root directory of this repository\n3. run `npm install` in order to install the complete build environment\n4. execute `npm run build` to create a new build\n\nYou may also look into the author's [build-configuration-study](https://github.com/rozek/build-configuration-study) for a general description of his build environment.\n\n## License ##\n\n[MIT License](LICENSE.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frozek%2Fsvelte-device-info","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frozek%2Fsvelte-device-info","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frozek%2Fsvelte-device-info/lists"}