简体   繁体   English

PhoneGap-在phonegap中检测设备类型

[英]PhoneGap - Detect device type in phonegap

I'm building an application in phonegap for the three different platforms: Android, iOS And Blackberry. 我正在phonegap中为三个不同的平台构建应用程序:Android,iOS和Blackberry。 While doing so, I have to detect the device type so that I can manage the height and width of my app on different platforms and for different devices like Android Phone, Android Tablet, iPhone, iPad and Blackberry... 这样做时,我必须检测设备类型,以便可以在不同平台上以及在不同设备(例如Android Phone,Android Tablet,iPhone,iPad和Blackberry)上管理应用程序的高度和宽度...

New in Phonegap, and simplest, is that you can use the device.platform: Phonegap的新功能(最简单)是您可以使用device.platform:

// Depending on the device, a few examples are:
//   - "Android"
//   - "BlackBerry"
//   - "iOS"
//   - "webOS"
//   - "WinCE"
//   - "Tizen"
//   - "browser"
var devicePlatform = device.platform;

if you want to get device type before onDeviceReady, you can get like this. 如果要在onDeviceReady之前获取设备类型,则可以这样获取。

var deviceType = (navigator.userAgent.match(/iPad/i))  == "iPad" ? "iPad" : (navigator.userAgent.match(/iPhone/i))  == "iPhone" ? "iPhone" : (navigator.userAgent.match(/Android/i)) == "Android" ? "Android" : (navigator.userAgent.match(/BlackBerry/i)) == "BlackBerry" ? "BlackBerry" : "null";

alert(deviceType);
cordova.platformId 
// "android"

you can use device.name property to get the detailed info about the device. 您可以使用device.name属性获取有关设备的详细信息。

    function onDeviceReady() {
    var name=device.name ;
       }

or to get only the platform you can use device.platform property. 或仅获取平台即可使用device.platform属性。

    function onDeviceReady() {
    var name=device.name ;
    var plat=device.platform;
       }

use this code as ur html file 使用此代码作为您的html文件

Device Properties Example 设备属性示例

<script type="text/javascript" charset="utf-8" src="phonegap-1.0.0.js"></script>
<script type="text/javascript" charset="utf-8">

// Wait for PhoneGap to load
//
document.addEventListener("deviceready", onDeviceReady, false);

// PhoneGap is ready
//
function onDeviceReady() {
    var element = document.getElementById('deviceProperties');

    element.innerHTML = 'Device Name: '     + device.name     + '<br />' + 
                        'Device PhoneGap: ' + device.phonegap + '<br />' + 
                        'Device Platform: ' + device.platform + '<br />' + 
                        'Device UUID: '     + device.uuid     + '<br />' + 
                        'Device Version: '  + device.version  + '<br />';
}

</script>

Loading device properties... 正在加载设备属性...

i suggest u to check this in device Best Of Luck Aamirkhan I. 我建议你在设备Best Of Luck Aamirkhan I中检查这一点。

You can have a look at the following link: http://docs.phonegap.com/en/1.0.0/phonegap_device_device.md.html 您可以查看以下链接: http : //docs.phonegap.com/en/1.0.0/phonegap_device_device.md.html

There are several methods to get device infos from phonegap. 有几种方法可以从phonegap获取设备信息。

An other option is to have a look at the browser type. 另一种选择是查看浏览器类型。 (IE = WP7, Safari = iOS,...) (IE = WP7,Safari = iOS,...)

I'm not sure if you will be able to detect if you are at an Android phone or tablet... Anyway your html apps should be able to handle any screen resolution. 我不确定您是否能够检测到您正在使用Android手机还是平板电脑...无论如何,您的html应用程序应该可以处理任何屏幕分辨率。 You can have different resolutions at the phones also! 您也可以在手机上使用不同的分辨率!

function onDeviceReady()
{
// ***IMPORTANT: access device object only AFTER "deviceready" event    
document.getElementById("name").innerHTML = device.name;
document.getElementById("pgversion").innerHTML = device.cordova ? device.cordov:device.phonegap;
document.getElementById("platform").innerHTML = device.platform;
document.getElementById("uuid").innerHTML = device.uuid;
document.getElementById("version").innerHTML = device.version;

}

See Here for device.platform 有关device.platform的信息,请参见此处

If you need this information because you're trying to format the screen correctly - you should be using CSS @media queries to determine the appropriate screen layout and apply CSS accordingly. 如果您由于试图正确格式化屏幕而需要此信息,则应使用CSS @media查询来确定适当的屏幕布局并相应地应用CSS。

Use Google to find info on "responsive design with CSS" 使用Google查找有关“使用CSS进行响应式设计”的信息

i would certainly NOT use the device type when laying out a page, the layout should be based on screen size only 布局页面时,我当然不会使用设备类型,布局应仅基于屏幕尺寸

you can use the javascript properties: 您可以使用javascript属性:

width = window.innerWidth
height = window.innerHeight

or use CSS: 或使用CSS:

.element{   
    height: 50vh;  //(height = 50 percent of screen)
}

see vmin,vmax, vh, vw 参见vmin,vmax,vh,vw

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM