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).

View the Demo →

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 端判断程序运行的设备的更多相关文章

  1. NPM install -save 和 -save-dev 傻傻分不清

    本文原文地址:https://www.limitcode.com/detail/59a15b1a69e95702e0780249.html 回顾 npm install 命令 最近在写Node程序的时 ...

  2. 下载一个vue项目执行npm install 后运行项目npm run dev后出错 - 问题解决

    在SVN上拉下来一个vue项目,上面没有提交项目里面的node_modules文件夹,所以要自己执行 npm install 安装,但安装完后运行项目后却报错了: $ npm run dev > ...

  3. 运行npm install命令的时候会发生什么？

    摘要:我们日常在下载第三方依赖的时候,都会用到一个命令npm install,那么你知道,在运行这个命令的时候都会发生什么吗? 本文分享自华为云社区<运行npm install命令的时候会发生什 ...

  4. This usually happens because your environment has changed since running `npm install`

    此时运行按照提示执行  npm rebuild node-sass  命令,(如若不行,则先运行npm install node-sass命令执行) 然后再运行 node命令,启动服务.

  5. 通过JS语句判断WEB网站的访问端是电脑还是手机

    通过JS语句判断WEB网站的访问端是电脑还是手机,以显示不同的页面! 目录腾讯网的适配代码如何判断访问网站的机器类型-如何判断ipadJS 判断浏览器客户端类型(ipad,iphone,android ...

  6. js如何判断用户是在pc端和还是移动端访问

    js如何判断用户是在pc端和还是移动端访问 来源:A5技术交流 作者:wofa 时间:2014-04-25收藏本页 最近一直在忙我们团队的项目“咖啡之翼”,在这个项目中,我们为移动平台提供了一个优秀的 ...

  7. NW.js构建PC收银端安装程序的指南

    1.首先下载nw.js的SDK: https://nwjs.org.cn/download.html 2.SDK目录下新建myapp文件夹: 3.myapp文件夹内新建package.json文件: ...

  8. [Node.js] npm init && npm install

    npm init: For create package.json file which will recode the dependence. npm install: You can also w ...

  9. ☀【Grunt】package.json, Gruntfile.js, npm install, grunt

    npm install --registry http://registry.npm.taobao.org/ 切换源 Grunt.js 在前端项目中的实战http://beiyuu.com/grunt ...

  10. $ npm install opencv ？ 你试试？！ 在windows环境下，使用node.js调用opencv攻略

    博主之前写过一篇文章<html5与EmguCV前后端实现——人脸识别篇>,叙述的是opencv和C#的故事.最近在公司服务器上更新了一套nodejs环境,早就听闻npm上有opencv模块 ...

随机推荐

  1. MyBatis-Plus 代码生成（旧）

    MyBatis-Plus官网的代码生成器配置不是特别全,在此整理了较为完整的配置,供自己和大家查阅学习. // 代码生成器 AutoGenerator mpg = new AutoGenerator( ...

  2. IDEA 各个版本下载指引

    1.IDEA 其它版本下载指引 网址: https://www.jetbrains.com.cn/idea/download/other.html 2.下载问题 下载哪个版本? win + R 打开命 ...

  3. 国密 SM2 的非对称加密解密过程

    国密 SM2 的非对称加密解密过程 椭圆曲线 椭圆曲线是由一组方程描述的点的集合: y2 = x3 + ax + b 其中 a, b 满足 (4a3 + 27b2 ≠ 0) SM2 定义了一个 sm2 ...

  4. webkit简介

    WebKit是一款开源的浏览器引擎,主要用于渲染HTML网页和执行JavaScript代码.WebKit起源于苹果公司,最初是为了开发Safari浏览器而创建的.现在,它已经成为许多浏览器(如苹果的S ...

  5. 日志架构演进：从集中式到分布式的Kubernetes日志策略

    当我们没有使用云原生方案部署应用时采用的日志方案往往是 ELK 技术栈. 这套技术方案比较成熟,稳定性也很高,所以几乎成为了当时的标配. 可是随着我们使用 kubernetes 步入云原生的时代后, ...

  6. 剑指 Offer II 018(Java). 有效的回文（简单）

    题目: 给定一个字符串 s ,验证 s 是否是 回文串 ,只考虑字母和数字字符,可以忽略字母的大小写. 本题中,将空字符串定义为有效的 回文串 . 示例 1: 输入: s = "A man, ...

  7. 力扣633(java&python)-平方数之和（中等）

    题目: 给定一个非负整数 c ,你要判断是否存在两个整数 a 和 b,使得 a2 + b2 = c . 示例 1: 输入:c = 5输出:true解释:1 * 1 + 2 * 2 = 5示例 2: 输 ...

  8. 谈谈PolarDB-X在读写分离场景的实践

    简介: 针对写少读多的业务可以考虑通过添加数据库节点来使其达到提升性能的目的,但添加节点,往往涉及到数据的搬迁,扩容周期比较长,很难应对徒增的业务流量,这个时候可以考虑采用读写分离的方式,将读写流量做 ...

  9. Spring Boot 微服务性能下降九成！使用 Arthas 定位根因

    简介: 接收到公司业务部门的开发反馈,应用在升级公司内部框架后,UAT(预生产)环境接口性能压测不达标. 背景 接收到公司业务部门的开发反馈,应用在升级公司内部框架后,UAT(预生产)环境接口性能压测 ...

  10. 节省 58% IT 成本，调用函数计算超过 30 亿次，石墨文档的 Serverless 实践

    简介:石墨文档使用函数计算搭建文档实时编辑服务,由函数计算的智能调度系统自动分配执行环境,处理多用户同时编写文档带来的峰值负载,函数计算的动态扩缩容能力保障应用的可靠运行. ​ 作者 | 金中茜 对石 ...