我正在为三个不同的平台在 phonegap 中构建一个应用程序:Android、iOS 和 Blackberry。这样做时,我必须检测设备类型,以便我可以在不同平台和不同设备上管理我的应用程序的高度和宽度,如 Android 手机、Android 平板电脑、iPhone、iPad 和黑莓......
9 回答
Phonegap 的新功能和最简单的功能是您可以使用 device.platform:
// Depending on the device, a few examples are:
// - "Android"
// - "BlackBerry"
// - "iOS"
// - "webOS"
// - "WinCE"
// - "Tizen"
// - "browser"
var devicePlatform = device.platform;
如果你想在 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"
您可以使用 device.name 属性来获取有关设备的详细信息。
function onDeviceReady() {
var name=device.name ;
}
或仅获取可以使用 device.platform 属性的平台。
function onDeviceReady() {
var name=device.name ;
var plat=device.platform;
}
将此代码用作您的 html 文件
设备属性示例
<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>
正在加载设备属性...
我建议您在设备 Best Of Luck Aamirkhan I 中进行检查。
您可以查看以下链接: http ://docs.phonegap.com/en/1.0.0/phonegap_device_device.md.html
有几种方法可以从 phonegap 获取设备信息。
另一种选择是查看浏览器类型。(IE = WP7,Safari = iOS,...)
我不确定您是否能够检测到您使用的是 Android 手机还是平板电脑……无论如何,您的 html 应用程序应该能够处理任何屏幕分辨率。您也可以在手机上拥有不同的分辨率!
如果您因为尝试正确格式化屏幕而需要此信息 - 您应该使用 CSS @media 查询来确定适当的屏幕布局并相应地应用 CSS。
使用 Google 查找有关“使用 CSS 进行响应式设计”的信息
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;
}
有关device.platform,请参见此处
我肯定不会在布局页面时使用设备类型,布局应该仅基于屏幕大小
您可以使用 javascript 属性:
width = window.innerWidth
height = window.innerHeight
或使用 CSS:
.element{
height: 50vh; //(height = 50 percent of screen)
}
见 vmin,vmax, vh, vw