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模块 ...
随机推荐
- WPF入门-导航页
本文适合有winform或web前端基础,且有C#开发基础的同学学习. 本文介绍的开发模式属于MVVM,即Model-View-ViewModel .这种开发模式上手简单,开发迅速. wpf入门第一篇 ...
- 【FAQ】HMS Core推送服务推送角标的开发及常见问题解答
目录 1.发送消息并显示桌面数字角标. 2.如何清除数字角标? 3.如何设置圆点角标? 4.应用桌面图标角标开关无法开启或未显示开关. 5.推送消息设置了角标字段但未显示角标? 6.未设置角标参数,但 ...
- DevEco Device Tool 3.1 Beta1版本发布，产品化配置优化添加自定义烧录器
原文:https://mp.weixin.qq.com/s/lVENZqc-1getmkoSgCJiEg,点击链接查看更多技术内容. HUAWEI DevEco Device Tool(以下内容简 ...
- Windows Server之KMS
KMS是什么? KMS全称是Key Management Service,本身就是微软官方提供的一种激活方式,通常用于大型组织客需要激活的客户端数量不固定的情况. 正常情况下,激活Windows系统需 ...
- 一步一步实现 .NET 8 部署到 Docker
一.前言 本文仅针对操作系统为 CentOS 8 的环境下部署方法进行讲述.如有需要,后续将在其他文章中进行其他系统下的部署方式讲解. 二.准备工作 确保服务器已安装 docker. 可以通过命令 d ...
- Vue权限管理该怎么做？控制到按钮级别的权限怎么做？
一.是什么 权限是对特定资源的访问许可,所谓权限控制,也就是确保用户只能访问到被分配的资源 而前端权限归根结底是请求的发起权,请求的发起可能有下面两种形式触发 页面加载触发 页面上的按钮点击触发 总的 ...
- Borůvka MST算法
当我认为最MST(最小生成树)已经没有什么学的了,才发现世界上还有个这个kruskal和prim结合的玩意 Borůvka 运用并查集的思想,先将每一个初始点集初始化为有且只有自己的点集,然后每一次合 ...
- 二叉查找树的实现C/C++
二叉查找树是一种关键字有序存放的二叉树.在不含重复关键字的二叉查找树中,关键字"较小"的节点一定在关键字"较大"的节点的左子树中,"较小"一 ...
- 融合数据库生态：利用 EventBridge 构建 CDC 应用
简介: 近期,EventBridge 事件流已经支持了基于阿里云 DTS服务的 CDC 能力.本文将从 CDC.CDC 在 EventBridge 上的应用以及若干最佳实践场景等方面,为大家介绍如何利 ...
- 【ESSD技术解读-01】 云原生时代，阿里云 ESSD 快照服务 助力企业级数据保护
简介:本文以云原生为时代背景,介绍了阿里云块存储快照服务如何基于高性能 ESSD 云盘提升快照服务性能,提供轻量.实时的用户体验及揭秘背后的技术原理.依据行业发展及云上数据保护场景,为企业用户及备份 ...