npm install current-device js 端判断程序运行的设备
https://github.com/matthewhudson/current-device
CURRENT-DEVICE
This module makes it easy to write conditional CSS and/or JavaScript based on device operating system (iOS, Android, Blackberry, Windows, MacOs, Firefox OS, MeeGo, AppleTV, etc), orientation (Portrait vs. Landscape), and type (Tablet vs. Mobile).
EXAMPLES
This module inserts CSS classes into the <html> element.
iPhone
Android Tablet
Blackberry Tablet
DEVICE SUPPORT
- iOS: iPhone, iPod, iPad
- Android: Phones & Tablets
- Blackberry: Phones & Tablets
- Windows: Phones & Tablets
- Firefox OS: Phones & Tablets
USAGE
Just include the script. The script then updates the <html> section with the appropriate classes based on the device's characteristics.
Installation
npm install current-device
And then import it:
// using es modules
import device from "current-device"; // common.js
const device = require("current-device").default;
Or use script tags and globals.
<script src="https://unpkg.com/current-device/umd/current-device.min.js"></script>
And then access it off the global like so:
console.log("device.mobile() === %s", device.mobile());
CONDITIONAL CSS
The following tables map which CSS classes are added based on device and orientation.
Device CSS Class Names
| Device | CSS Classes |
|---|---|
| iPad | ios ipad tablet |
| iPhone | ios iphone mobile |
| iPod | ios ipod mobile |
| Android Phone | android mobile |
| Android Tablet | android tablet |
| BlackBerry Phone | blackberry mobile |
| BlackBerry Tablet | blackberry tablet |
| Windows Phone | windows mobile |
| Windows Tablet | windows tablet |
| Firefox OS Phone | fxos mobile |
| Firefox OS Tablet | fxos tablet |
| MeeGo | meego |
| Desktop | desktop |
| Television | television |
Orientation CSS Class Names
| Orientation | CSS Classes |
|---|---|
| Landscape | landscape |
| Portrait | portrait |
CONDITIONAL JAVASCRIPT
This module also includes support for conditional JavaScript, allowing you to write checks on the following device characteristics:
Device JavaScript Methods
| Device | JavaScript Method |
|---|---|
| Mobile | device.mobile() |
| Tablet | device.tablet() |
| Desktop | device.desktop() |
| iOS | device.ios() |
| iPad | device.ipad() |
| iPhone | device.iphone() |
| iPod | device.ipod() |
| Android | device.android() |
| Android Phone | device.androidPhone() |
| Android Tablet | device.androidTablet() |
| BlackBerry | device.blackberry() |
| BlackBerry Phone | device.blackberryPhone() |
| BlackBerry Tablet | device.blackberryTablet() |
| Windows | device.windows() |
| Windows Phone | device.windowsPhone() |
| Windows Tablet | device.windowsTablet() |
| Firefox OS | device.fxos() |
| Firefox OS Phone | device.fxosPhone() |
| Firefox OS Tablet | device.fxosTablet() |
| MeeGo | device.meego() |
| Television | device.television() |
Orientation JavaScript Methods
| Orientation | JavaScript Method |
|---|---|
| Landscape | device.landscape() |
| Portrait | device.portrait() |
Orientation JavaScript Callback
device.onChangeOrientation(newOrientation => {
console.log(`New orientation is ${newOrientation}`);
});
Utility Methods
device.noConflict()
Run current-device in noConflict mode, returning the device variable to its previous owner. Returns a reference to the device object.
const currentDevice = device.noConflict();
Useful Properties
Access these properties on the device object to get the first match on that attribute without looping through all of its getter methods.
| JS Property | Returns |
|---|---|
| device.type | 'mobile', 'tablet', 'desktop', or 'unknown' |
| device.orientation | 'landscape', 'portrait', or 'unknown' |
| device.os | 'ios', 'iphone', 'ipad', 'ipod', 'android', 'blackberry', 'windows', 'macos', 'fxos', 'meego', 'television', or 'unknown' |
BEST PRACTICES
Environment detection has a high rate of misuse. Often times, folks will attempt to work around browser feature support problems by checking for the affected browser and doing something different in response. The preferred solution for those kinds of problems, of course, is to check for the feature, not the browser (ala Modernizr).
However, that common misuse of device detection doesn't mean it should never be done. For example, current-device could be employed to change the interface of your web app such that it uses interaction patterns and UI elements common to the device it's being presented on. Android devices might get a slightly different treatment than Windows or iOS, for instance. Another valid use-case is guiding users to different app stores depending on the device they're using.
In short, check for features when you need features, and check for the browser when you need the browser.
Contributors
Thanks goes to these wonderful people (emoji key):
 Matthew Hudson |
 Rafael Terán |
 Allan |
 martinwepner |
This project follows the all-contributors specification. Contributions of any kind welcome!
npm install current-device js 端判断程序运行的设备的更多相关文章
- NPM install -save 和 -save-dev 傻傻分不清
本文原文地址:https://www.limitcode.com/detail/59a15b1a69e95702e0780249.html 回顾 npm install 命令 最近在写Node程序的时 ...
- 下载一个vue项目执行npm install 后运行项目npm run dev后出错 - 问题解决
在SVN上拉下来一个vue项目,上面没有提交项目里面的node_modules文件夹,所以要自己执行 npm install 安装,但安装完后运行项目后却报错了: $ npm run dev > ...
- 运行npm install命令的时候会发生什么？
摘要:我们日常在下载第三方依赖的时候,都会用到一个命令npm install,那么你知道,在运行这个命令的时候都会发生什么吗? 本文分享自华为云社区<运行npm install命令的时候会发生什 ...
- This usually happens because your environment has changed since running `npm install`
此时运行按照提示执行 npm rebuild node-sass 命令,(如若不行,则先运行npm install node-sass命令执行) 然后再运行 node命令,启动服务.
- 通过JS语句判断WEB网站的访问端是电脑还是手机
通过JS语句判断WEB网站的访问端是电脑还是手机,以显示不同的页面! 目录腾讯网的适配代码如何判断访问网站的机器类型-如何判断ipadJS 判断浏览器客户端类型(ipad,iphone,android ...
- js如何判断用户是在pc端和还是移动端访问
js如何判断用户是在pc端和还是移动端访问 来源:A5技术交流 作者:wofa 时间:2014-04-25收藏本页 最近一直在忙我们团队的项目“咖啡之翼”,在这个项目中,我们为移动平台提供了一个优秀的 ...
- NW.js构建PC收银端安装程序的指南
1.首先下载nw.js的SDK: https://nwjs.org.cn/download.html 2.SDK目录下新建myapp文件夹: 3.myapp文件夹内新建package.json文件: ...
- [Node.js] npm init && npm install
npm init: For create package.json file which will recode the dependence. npm install: You can also w ...
- ☀【Grunt】package.json, Gruntfile.js, npm install, grunt
npm install --registry http://registry.npm.taobao.org/ 切换源 Grunt.js 在前端项目中的实战http://beiyuu.com/grunt ...
- $ npm install opencv ？ 你试试？！ 在windows环境下，使用node.js调用opencv攻略
博主之前写过一篇文章<html5与EmguCV前后端实现——人脸识别篇>,叙述的是opencv和C#的故事.最近在公司服务器上更新了一套nodejs环境,早就听闻npm上有opencv模块 ...
随机推荐
- Viu联合华为HMS生态，共创影音娱乐新体验
华为HMS生态携手流媒体平台Viu,为海外消费者打造精品移动娱乐应用体验,并助力提升流量变现能力.Viu在中东非.东南亚等16个国家及地区提供广告合作和付费会员服务,支持优质视频内容高清点播和直播.自 ...
- 大奖升级！HMS Core线上Codelabs挑战赛第3期：用3D建模构建元宇宙
"元宇宙"概念风生水起,在AR.VR等技术构建的虚拟世界里,3D模型担当重要角色,无论是为玩家提供更丰富更真实游戏体验的3D游戏领域,还是各大电商平台正在启用并不断完善的3D虚拟购 ...
- Counter 1000
From a 1000 Hz clock, derive a 1 Hz signal, called OneHertz, that could be used to drive an Enable s ...
- Prometheus 性能调优-水平分片
简介 之前笔者有连续 2 篇文章: Prometheus 性能调优 - 什么是高基数问题以及如何解决? 如何精简 Prometheus 的指标和存储占用 陆续介绍了一些 Prometheus 的性能调 ...
- 开发指导—利用组件&插值器动画实现HarmonyOS动效
一. 组件动画 在组件上创建和运行动画的快捷方式.具体用法请参考通用方法. 获取动画对象 通过调用animate方法获得animation对象,animation对象支持动画属性.动画方法和动画事件. ...
- 【有奖互动】开发者版本新特性，你期待哪些更新？#HDC.Together2023#
<hdc.together< span="">>华为开发者大会2023再次启航,将于8月4日~6日在中国松山湖举办,承载万千期待,开启崭新时代.聚焦新版本. ...
- 如何基于香橙派AIpro对视频/图像数据进行预处理
本文分享自华为云社区<如何基于香橙派AIpro对视频/图像数据进行预处理>,作者: 昇腾CANN. 受网络结构和训练方式等因素的影响,绝大多数神经网络模型对输入数据都有格式上的限制.在计算 ...
- 网关流控利器：结合 AHAS 实现 Ingress/Nginx 流量控制
简介:微服务的稳定性一直是开发者非常关注的话题.随着业务从单体架构向分布式架构演进以及部署方式的变化,服务之间的依赖关系变得越来越复杂,业务系统也面临着巨大的高可用挑战. 作者:涂鸦 微服务的稳定性 ...
- Flink 1.13，面向流批一体的运行时与 DataStream API 优化
简介: 在 1.13 中,针对流批一体的目标,Flink 优化了大规模作业调度以及批执行模式下网络 Shuffle 的性能,以及在 DataStream API 方面完善有限流作业的退出语义. 本文由 ...
- [Blockchain] Cosmos Starport 101 - 为你的新数据类型 生成代码
# 项目模板 $ starport app github.com/hello/planet --address-prefix your_new_prefix 项目目录结构的说明看这里: https:/ ...