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模块 ...
随机推荐
- Avalonia中的布局
Avalonia是一个跨平台的.NET UI框架,它允许开发者使用C#和XAML来创建丰富的桌面应用程序.在Avalonia中,Alignment.Margin和Padding是非常重要的布局属性,它 ...
- BTC的数据结构
区块链是一个个block所构成的链,或者链表状的数据结构,在比特币中或者区块链中,一个重要的组成部分是哈希指针 指针 在程序运行过程中,需要用到数据.最简单的是直接获取数据,但当数据本身较大,需要占用 ...
- JavaSE--初识&&开发基础
JDK.JRE.JVM JDK:Java Development Kit java开发环境 JRE:Java Runtime Environment java运行时环境 JVM:JAVA Virtua ...
- SSM整合项目中使用百度Ueditor遇到的问题。
问题描述:无法上传图片,提示配置项加载有问题 大致情形:直接下载的ue编辑器,放在了/resources/ 目录下,也就是静态资源路径,然后更改web.xml,将tomcat默认拦截器配置放到所有 ...
- Vue权限管理该怎么做？控制到按钮级别的权限怎么做？
一.是什么 权限是对特定资源的访问许可,所谓权限控制,也就是确保用户只能访问到被分配的资源 而前端权限归根结底是请求的发起权,请求的发起可能有下面两种形式触发 页面加载触发 页面上的按钮点击触发 总的 ...
- 剑指offer29(Java)-顺时针打印矩阵（简单）
题目: 输入一个矩阵,按照从外向里以顺时针的顺序依次打印出每一个数字. 示例 1: 输入:matrix = [[1,2,3],[4,5,6],[7,8,9]]输出:[1,2,3,6,9,8,7,4,5 ...
- 力扣454(java&python)-四数相加 II（中等）
题目: 给你四个整数数组 nums1.nums2.nums3 和 nums4 ,数组长度都是 n ,请你计算有多少个元组 (i, j, k, l) 能满足: 0 <= i, j, k, l &l ...
- [Gse] 高效的Golang中文分析库推荐
优点:用法简单,支持各种语言,基本满足需求. 缺点:默认分词字典文件有 8M 需测试使用速度. 我们可以直接封装一个简单的辅助方法来实现分词功能: // @author cnblogs.com/far ...
- [FAQ] Large files detected. You may want to try Git Large File Storage
Git 提交文件大于 100M 时提示需要使用 Git LFS. Ubuntu 安装示例: $ curl -s https://packagecloud.io/install/repositories ...
- dotnet 6 使用 DependentHandle 关联对象生命周期
本文将告诉大家在 dotnet 6 新加入的 System.Runtime.DependentHandle 的类型的使用方法,通过 DependentHandle 可以实现将某个对象的引用生命周期和另 ...