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. 鼠标移动出现雪花-js实现

    // 鼠标移动出现雪花.html <!DOCTYPE html> <html> <head> <title></title> <scr ...

  2. A7-100T的图像处理开发板

    深圳市飞录科技有限公司 一:概述 开发板主控采用Xilinx Artix-7系列FPGA,型号为XC7A100T-2FGG676C,具有100K LUTs, 240个DSP, 芯片集成了LVDS.DD ...

  3. 力扣197(MySQL)-上升的温度（简单）

    题目: 表: Weather 编写一个 SQL 查询,来查找与之前(昨天的)日期相比温度更高的所有日期的 id . 返回结果 不要求顺序 . 查询结果格式如下例. 解题思路: 方法一:使用窗口函数la ...

  4. 团队管理｜如何提高技术Leader的思考技巧？

    简介: 技术Leader是一个对综合素质要求非常高的岗位,不仅要有解具体技术问题的架构能力,还要具备团队管理的能力,更需要引领方向带领团队/平台穿越迷茫进阶到下一个境界的能力.所以通常来说技术Lead ...

  5. K8s 网关选型初判：Nginx 还是 Envoy？

    简介: 本文将从性能和成本.可靠性.安全性 3 方面,对两大开源实现进行比对,希望对正在做 K8s 网关选型的企业有所借鉴. 作者:张添翼(澄潭) 为了避免混淆,我们先对一些关键定义做一些厘清: 传统 ...

  6. 消息队列Kafka「检索组件」重磅上线！

    ​简介:本文对消息队列 Kafka「检索组件」进行详细介绍,首先通过对消息队列使用过程中的痛点问题进行介绍,然后针对痛点问题提出相应的解决办法,并对关键技术技术进行解读,旨在帮助大家对消息队列 Kaf ...

  7. 阿里云混合云Apsara Stack 2.0发布 加速政企数智创新

    ​简介: 2021年10月21日,杭州 – 今日,阿里云于云栖大会正式发布Apsara Stack 2.0,从面向单一私有云场景,升级为服务大型集团云&行业云场景.新一代Apsara Stac ...

  8. MySQL 深潜 - 一文详解 MySQL Data Dictionary

    ​简介: 在 MySQL 8.0 之前,Server 层和存储引擎(比如 InnoDB)会各自保留一份元数据(schema name, table definition 等),不仅在信息存储上有着重复 ...

  9. aspnetcore两种上传图片(文件)的方式

    aspnetcore上传图片也就是上传文件有两种方式,一种是通过form-data,一种是binary. 先介绍第一种form-data: 该方式需要显示指定一个IFormFile类型,该组件会动态通 ...

  10. M9K内存使用教程

    M9K内存使用教程 M9K内存是Altera内嵌的高密度存储阵列.现代的FPGA基本都包含类似的不同大小的内存. M9K的每个块有8192位(包含校验位实际是9216位).配置灵活.详细了解M9K可参 ...