dd

Device API


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对象

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

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