Device API

优质

小牛编辑

134浏览

2023-12-01

Framework7拥有设备检测库。在你初始化应用之后，你可以访问myApp.device这个对象，它包含了关于设备和平台的有用信息：

myApp.device.os	string. 包含"android" (对于Android), "ios" (对于iOS), undefined (对于任意其他操作系统/平台)
myApp.device.osVersion	string. 包含操作系统版本号，只在Android和iOS设备上可用。例如，如果是iOS设备，且其版本为7.1，则会显示“7.1”
myApp.device.android	boolean. 对于Android设备，为true，对于其他设备，为false
myApp.device.ios	boolean. 对于iOS设备，为true，对于其他设备，为false
myApp.device.ipad	boolean. 对于iPad，为true，对于其他设备，为false
myApp.device.iphone	boolean. 对于iPhone/iPod Touch，为true，对于其他设备，为false
myApp.device.pixelRatio	number. 返回设备屏幕像素比，实际上，它就是`window.devicePixelRatio`的快捷方式
myApp.device.webView	boolean. 如果应用在UIWebView（安装在家用电脑或phone gap上的网络应用）中运行，为true
myApp.device.minimalUi	boolean. 如果启用了minimal-ui模式，为true。所谓minimal-ui模式，即为：当网络应用运行在iOS 7.1+的iPhone/iPod上，并且添加了minimal-ui viewport这个meta标签
myApp.device.statusBar	boolean. 如果应用运行在全屏模式，并且需要状态栏遮罩，为true。只针对iOS

额外的<html>类

这个设备检测库也在<html>元素上加入了额外的类，以在不同的操作系统和平台上，具有不同的CSS样式。

所以，如果你用iOS 7.1的设备打开应用，你会拥有以下类：

<html class="ios ios-7 ios-7-1 ios-gt-6 pixel-ratio-1">
...

如果你用具有retina屏的iOS 7.1设备来打开应用，并且运行在全屏模式下（myApp.device.statusBar = true）：

<html class="ios ios-7 ios-7-1 ios-gt-6 retina pixel-ratio-2 with-statusbar-overlay">
...

如果你用iOS 8.0设备来打开应用，并且运行在全屏模式下（myApp.device.statusBar = true）：

<html class="ios ios-8 ios-8-0 ios-gt-6 ios-gt-7 with-statusbar-overlay">
...

If you open app on iPhone6 Plus and your app running in full screen mode (myApp.device.statusBar = true):

<html class="ios ios-8 ios-8-0 ios-gt-6 ios-gt-7 retina pixel-ratio-3 with-statusbar-overlay">
...

如果你用Android 4.4设备来打开应用，你会拥有以下类：

<html class="android android-4 android-4-4">
...

换句话说，类基于以下规则计算：

<html class="[os] [os major version] [os full version] [retina] pixel-ratio-[devicePixelRatio] [with-statusbar-overlay]">
...

注意，“greater than”（ios-gt-6: 对于所有高于iOS 6的iOS）类只对iOS有效

也可以通过原型来访问Device对象的参数：

var device = Framework7.prototype.device;
if (device.iphone) {
  console.log('this is iPhone')
}