Ember device detection is an Ember addon for client-side device detection and a wrapper of the UA parser library. It makes it easy to render different views or url redirection based on 4 device criteria:
- operating system (iOS, Android,...)
- type (tablet, Mobile, phone,...)
- browser(Chrome, Safari, IE,...)
- media queries (only screen and (max-device-width: 640px))
and without needing special server-side configuration, saving the time and effort required to do user agent string parsing.
The idea behind a ember-device-detection is simple: As you build an mvp or prototyping an application, you might not implemented a browser or multi device compatibility yet. To avoid a bad user experience, it would be great to redirect a user if his/her device is not supported by your application yet. It can be a redirection to another page or serving a different html view. Thus, you avoid receiving hundreds of bugs caused by users entering your app with an incompatible device or browser.
ember install ember-device-detection
And add merely a <link>
tag to your <head>
section in your main index.html
file :
<link rel="alternate" criteria="value" href="url" id="id">
For example, it is how your index.html will look like:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Your app</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="alternate" href="https://qonto.eu/en/iphone" id="phone" os="ios">
<link rel="alternate" href="/tablet.html" id="tablet" type="tablet">
<link rel="alternate" href="https://qonto.eu/en" id="phone" browser="chrome">
<link rel="alternate" href="https://qonto.eu/en/other" id="phone" media="only screen and (max-device-width: 640px)">
{{content-for "head"}}
<link rel="stylesheet" href="{{rootURL}}assets/vendor.css">
<link rel="stylesheet" href="{{rootURL}}assets/yourapp.css">
{{content-for "head-footer"}}
</head>
<body>
{{content-for "body"}}
<script src="{{rootURL}}assets/vendor.js"></script>
<script src="{{rootURL}}assets/yourapp.js"></script>
{{content-for "body-footer"}}
</body>
</html>
~~ OR ~~
If you want to keep your index.html clean, in your app's ember-cli-build.js, define inlineContent options on your app instance
var app = new EmberApp(defaults, {
inlineContent: {
'device' : {
content: '<link rel="alternate" href="https://qonto.eu/en/iphone" id="phone" os="ios">'
}
}
});
Then in your index.html file, use the content-for
helper in your <head>
tag with a references to the keys in your options:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Your app</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
{{content-for 'device'}}
<link rel="stylesheet" href="{{rootURL}}assets/vendor.css">
<link rel="stylesheet" href="{{rootURL}}assets/yourapp.css">
{{content-for "head-footer"}}
</head>
<body>
{{content-for "body"}}
<script src="{{rootURL}}assets/vendor.js"></script>
<script src="{{rootURL}}assets/yourapp.js"></script>
{{content-for "body-footer"}}
</body>
To learn more about this implementation, please visit ember-cli-inline-content
os
attribute must match one of these value listed below:
<link rel="alternate" os="value" href="url" id="id">
# Possible 'value'
AIX, Amiga OS, Android, Arch, Bada, BeOS, BlackBerry, CentOS, Chromium OS, Contiki,
Fedora, Firefox OS, FreeBSD, Debian, DragonFly, Gentoo, GNU, Haiku, Hurd, iOS,
Joli, Linpus, Linux, Mac OS, Mageia, Mandriva, MeeGo, Minix, Mint, Morph OS, NetBSD,
Nintendo, OpenBSD, OpenVMS, OS/2, Palm, PC-BSD, PCLinuxOS, Plan9, Playstation, QNX, RedHat,
RIM Tablet OS, RISC OS, Sailfish, Series40, Slackware, Solaris, SUSE, Symbian, Tizen,
Ubuntu, UNIX, VectorLinux, WebOS, Windows [Phone/Mobile], Zenwalk
type
attribute must match one of these value listed below:
<link rel="alternate" type="value" href="url" id="id">
# Possible 'value'
console, mobile, tablet, smarttv, wearable, embedded
browser
attribute must match one of these value listed below:
<link rel="alternate" browser="value" href="url" id="id">
# Possible 'value'
Amaya, Android Browser, Arora, Avant, Baidu, Blazer, Bolt, Bowser, Camino, Chimera,
Chrome [WebView], Chromium, Comodo Dragon, Conkeror, Dillo, Dolphin, Doris, Edge,
Epiphany, Fennec, Firebird, Firefox, Flock, GoBrowser, iCab, ICE Browser, IceApe,
IceCat, IceDragon, Iceweasel, IE[Mobile], Iron, Jasmine, K-Meleon, Konqueror, Kindle,
Links, Lunascape, Lynx, Maemo, Maxthon, Midori, Minimo, MIUI Browser, [Mobile] Safari,
Mosaic, Mozilla, Netfront, Netscape, NetSurf, Nokia, OmniWeb, Opera [Mini/Mobi/Tablet],
PhantomJS, Phoenix, Polaris, QQBrowser, RockMelt, Silk, Skyfire, SeaMonkey, Sleipnir,
SlimBrowser, Swiftfox, Tizen, UCBrowser, Vivaldi, w3m, WeChat, Yandex
media queries
attribute must match one of these value listed below:
<link rel="alternate" media="value" href="url" id="id">
# Possible 'value'
only screen and (touch-enabled: 0),
only screen and (max-device-width: 640px),
only screen and (min-device-width: 641px,
...any valid media query type
git clone <repository-url>
this repositorycd ember-device-detection
npm install
ember serve
- Visit your app at https://localhost:4200.
npm test
(Runsember try:each
to test your addon against multiple Ember versions)ember test
ember test --server
ember build
For more information on using ember-cli, visit https://ember-cli.com/.