Phonegap代码作为一个Web应用程序

使用响应式设计，您的手机代码应该可以在几乎任何设备上运行。知道它运行的是什么（设备和操作系统）非常重要，以便您可以做出相应的响应。我建立一个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

我使用一个名为viewport一个容器<div>创建我的反应容器中，并根据尺寸设备上它是上。

演示：

这是初始化代码设置好一切：

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和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的是可用的和准备。当我的代码运行在应该正在运行phonegap的设备上运行时，我轮询该对象而不是依赖于挑剔的事件。当调用initializePhoneGap()回调时，该应用程序已准备好启动。

在整个应用程序中，我将if(window.deviceInfo.phonegap) {}中的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(); 
    }; 
}; 

是的，它会干活都试过你requirement.Including科尔多瓦js文件的作品反之亦然但是有一些功能不supported.But你一定会得到基本的。

我们正在开发iPad应用程序并将其作为移动网站进行部署。无论何时进行PhoneGap特定调用，使用称为isRunningOnPhoneGap（）的常用方法（如果代码以网站的形式运行，则返回false），我们决定是调用PhoneGap功能还是显示Web功能。这是我们如何决定应用程序是作为网站还是移动设备运行。

var isRunningOnPhoneGap: function() { 
     if ((document.URL.indexOf('http://') === -1) && (document.URL.indexOf('https://') === -1)) { 
      if (navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/)) { 
       return true; 
      } else { 
       return false; 
      } 
     } else { 
      return false; 
     } 
    }