通过响应式设计,您的phonegap 代码应该可以在几乎所有设备上运行。了解它正在运行的设备(设备和操作系统)非常重要,以便您可以做出相应的响应。我建立一个window.deviceInfo
预先包含以下信息的对象:
-
window.deviceInfo.type
: handheld
, tablet
, desktop
-
window.deviceInfo.brand
: ios
, android
, microsoft
, webos
, blackberry
-
window.deviceInfo.mode
: browser
, standalone
, webview
-
window.deviceInfo.mobile
: true
, false
-
window.deviceInfo.phonegap
: true
, false
我使用单个容器<div>
called viewport
创建我的响应式容器并根据其所在的设备调整其大小。
Demo:
这是设置所有内容的初始化代码:
initializeEnvironment();
initializeDimensions();
initializePhoneGap( function () {
//start app
} );
首先我设置window.deviceInfo
.
function initializeEnvironment() {
//window.deviceInfo.type: handheld, tablet, desktop
//window.deviceInfo.brand: ios, android, microsoft, webos, blackberry
//window.deviceInfo.mode: browser, standalone, webview
//window.deviceInfo.mobile: true, false
//window.deviceInfo.phonegap: true, false
var userAgent = window.navigator.userAgent.toLowerCase();
window.deviceInfo = {};
if ( /ipad/.test( userAgent ) || ( /android/.test( userAgent ) && !/mobile/.test( userAgent ) ) ) {
window.deviceInfo.type = 'tablet';
} else if ( /iphone|ipod|webos|blackberry|android/.test( userAgent ) ) {
window.deviceInfo.type = 'handheld';
} else {
window.deviceInfo.type = 'desktop';
};
if ( /iphone|ipod|ipad/.test( userAgent ) ) {
var safari = /safari/.test( userAgent );
window.deviceInfo.brand = 'ios';
if ( window.navigator.standalone ) {
window.deviceInfo.mode = 'standalone';
} else if ( safari ) {
window.deviceInfo.mode = 'browser';
} else if ( !safari ) {
window.deviceInfo.mode = 'webview';
};
} else if ( /android/.test( userAgent ) ) {
window.deviceInfo.brand = 'android';
window.deviceInfo.mode = 'browser';
} else if ( /webos/.test( userAgent ) ) {
window.deviceInfo.brand = 'webos';
window.deviceInfo.mode = 'browser';
} else if ( /blackberry/.test( userAgent ) ) {
window.deviceInfo.brand = 'blackberry';
window.deviceInfo.mode = 'browser';
} else {
window.deviceInfo.brand = 'unknown';
window.deviceInfo.mode = 'browser';
};
window.deviceInfo.mobile = ( window.deviceInfo.type == 'handheld' || window.deviceInfo.type == 'tablet' );
};
然后我调整大小viewport
以及任何其他需要它的东西。移动设备使用window.innerWidth
and window.innerHeight
占据全屏。
function initializeDimensions() {
var viewport = document.getElementById( 'viewport' );
if ( window.deviceInfo.mobile ) {
viewport.style.width = window.innerWidth + 'px';
viewport.style.height = window.innerHeight + 'px';
} else {
//requirements for your desktop layout may be different than full screen
viewport.style.width = '300px';
viewport.style.height = '300px';
};
//set individual ui element sizes here
};
最后,我用window.device
(请注意,这与deviceInfo
我创建的对象)来验证phonegap是否可用并准备好。而不是依赖挑剔deviceready
事件,当我的代码在设备上运行时,我会轮询该对象should正在运行phonegap。当。。。的时候initializePhoneGap()
调用回调后,应用程序已准备好启动。
在整个应用程序中,我将phonegap功能包装在if( window.deviceInfo.phonegap ) {}
.
function initializePhoneGap( complete ) {
if ( window.deviceInfo.brand == 'ios' && window.deviceInfo.mode != 'webview' ) {
window.deviceInfo.phonegap = false;
complete();
} else if ( window.deviceInfo.mobile ) {
var timer = window.setInterval( function () {
if ( window.device ) {
window.deviceInfo.phonegap = true;
complete();
};
}, 100 );
window.setTimeout( function () { //failsafe
if ( !window.device ) { //in webview, not in phonegap or phonegap failed
window.clearInterval( timer );
window.deviceInfo.phonegap = false;
complete();
};
}, 5000 ); //fail after 5 seconds
} else {
window.deviceInfo.phonegap = false;
complete();
};
};