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模块 ...
随机推荐
- 将 Github Pages 个人博客录入搜索引擎（以 Bing 为例）
目录 关于 Bing Webmaster Tools 步骤一:登录 步骤二:添加网站 步骤三:验证网站 步骤四:添加网站地图 验证 & 总结 相关链接 笔者最近准备将 Gitee Pages ...
- gitlib配置
第1步:下载Java并安装Java.一般来说下载jdk对应的版本就行. 第2步:配置Java环境变量,具体如下: 1. 新建:变量名:JAVA_HOME:变量值:C:\Program Files\Ja ...
- SQL SERVER 数据库性能优化与管理从零基础到走两步系列（一）——性能计数器
前辈大佬资料: 使用性能监视器找出SQLServer硬件瓶颈 在网络上苦苦流浪了近十几个小时,从百度到谷歌,从CSDN到博客园,从知乎到微信读书,看了无数本滥竽充数的书,读了无数篇夹生的技术文章,快下 ...
- LLM开源小工具(基于代码库快速学习/纯shell调用LLM灵活管理系统)
随着AI的各种信息的发展,LLM各种模型不断涌现,作为一名IT人员不得不向前走,不断探索学习发现新知识. 随着学习,也了解到一些对于模型的调用,从而解决一些问题,或者对已有工具或应用的重写.如下是两个 ...
- 基于IoT全链路实时质量-魔洛哥
简介: 通过基于IoT的全链路实时质量,业务使用狄仁杰进行全链路埋点后,可一键接入魔洛哥平台,实现终端问题的实时感知和链路分析,以及智能终端系统业务场景的全链路实时质量.整体方案接入成本低(分钟级别接 ...
- 全面提升易用性：OpenClusterManagement 0.7 版本发布
简介:千呼万唤始出来,三月末 OpenClusterManagement 社区正式发布了 v0.7 版本.在新的版本有一系列新的功能特性欢迎感兴趣的读者体验探索,同时在这个版本中社区维护者对目前已有 ...
- e签宝：借助钉钉宜搭变革传统项目管理模式，交付效率显著提升
简介:通过钉钉宜搭,e签宝在半个月内搭建了项目交付管理平台,提升了项目管理的效率和质量,推进了团队核心业务的信息化建设.e签宝在有效梳理了各环节的工作进度.质量.成本.职权后,通过宜搭平台保障了内外 ...
- [TP5] ThinkPHP 默认模块和单模块的设置方式
由于默认是采用多模块的支持,所以多个模块的情况下必须在URL地址中标识当前模块, 如果只有一个模块的话,可以进行模块绑定,方法是应用的入口文件中添加如下代码: // 绑定当前访问到index模块 de ...
- [FAQ] VisualStudio, Source file requires different compiler version (current compiler is 0.6.1+cxxxxxx)
当使用的 Solidity 库文件中 pragma 指定的 版本 与本地编译器的使用版本不一致时,会出现这类提示. 解决方式是菜单栏 View -> Extensions -> Exten ...
- 读书笔记 为什么要有R5G6B5颜色格式
在 Windows 下,颜色的格式有很多,我好奇为什么要设计出 R5G6B5 这样的格式?通过阅读一些书和官方的文档,似乎了解了为什么,我在本文记录一下 颜色的格式上,常用的就是 16 位和 32 位 ...