cordova – 作为网络应用程序的Phonegap代码

概述我正在考虑重新使用我的phonegap html,css和js代码作为网络应用程序. 我将通过并删除任何移动功能. 目的是拥有一个提供某些移动应用程序功能的Web应用程序,我目前使用的移动设备功能非常少.但我猜测维护每次发布我的移动应用程序代码都会很麻烦. 你们中的任何人以前都试过这个吗？有小费吗 ？ 通过响应式设计,您的phonegap代码几乎可以在任何设备上运行.了解它的运行情况(设备和 *** 作系 我正在考虑重新使用我的phonegap HTML,CSS和Js代码作为网络应用程序.
我将通过并删除任何移动功能.

目的是拥有一个提供某些移动应用程序功能的Web应用程序,我目前使用的移动设备功能非常少.但我猜测维护每次发布我的移动应用程序代码都会很麻烦.

你们中的任何人以前都试过这个吗？有小费吗 ？

解决方法 通过响应式设计,您的phonegap代码几乎可以在任何设备上运行.了解它的运行情况(设备和 *** 作系统)非常重要,这样您才能做出相应的响应.我预先构建一个window.deviceInfo对象,其中包含以下信息：

> window.deviceInfo.type：掌上电脑,平板电脑,桌面
> window.deviceInfo.brand：ios,android,microsoft,webos,blackBerry
> window.deviceInfo.mode：浏览器,独立,webvIEw
> window.deviceInfo.mobile：true,false
> window.deviceInfo.phonegap：true,false

我使用一个容器< div>调用视口来创建我的响应式容器,并根据它所在的设备调整大小.

演示：

这是设置所有内容的初始化代码：

initializeEnvironment();initializeDimensions();initializePhoneGap( function () {   //start app  } );

首先我设置window.deviceInfo.

function initializeEnvironment() {    //window.deviceInfo.type: handheld,tablet,desktop    //window.deviceInfo.brand: ios,androID,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' );};

然后我调整视口大小以及其他任何需要它的东西.移动设备使用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的设备上运行时,我会轮询该对象,而不是依赖于挑剔的deviceready事件.调用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();    };};

总结

以上是内存溢出为你收集整理的cordova – 作为网络应用程序的Phonegap代码全部内容，希望文章能够帮你解决cordova – 作为网络应用程序的Phonegap代码所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。