cordova 5.4版本 适配全面屏 底部黑边问题
在全面屏发布之后,Android官方提供了适配方案,即提高App所支持的最大屏幕纵横比,实现很简单,在AndroidManifest.xml中可做如下配置:
更改android.max_aspect值,其中ratio_float为浮点数,官方建议为2.1或更大,因为18.5:9=2.055555555……,如果日后出现纵横比更大的手机,此值将会更大。
<manifest> <application> <meta-data android:name="android.max_aspect" android:value="2.1"/> </application> </manifest>
因为我们的cordova版本较旧,所以只能用hook的方式,直接修改AndroidManifest.xml,我们是ionic项目所以直接把下面的hook文件放到after_prepare文件夹内即可。
如果hook文件没有执行,需要在config.xml内加一个配置去执行。<hook type=”after_prepare” src=”hooks/after_prepare/set_full_screen.js”/>
hook文件代码如下
set_full_screen.js
#!/usr/bin/env node var _ = require('lodash'); var fs = require('fs'); var path = require('path'); var spawnSync = require('child_process').spawnSync; var rootdir = process.argv[2]; var xml2js = require('xml2js'); //xml->json //xml2js默认会把子子节点的值变为一个数组, explicitArray设置为false var xmlParser = new xml2js.Parser({explicitArray : false, ignoreAttrs : false}) //json->xml var jsonBuilder = new xml2js.Builder(); fs.readFile('platforms/android/AndroidManifest.xml','utf-8',function(err,xml) { // xml -> json xmlParser.parseString(xml, function (err, result) { // var time=new Date().getTime(); // console.log(result.widget["$"]["version"].replace(/\./,'0').replace(/\./,'')) // result.manifest["meta-data"]=[ // { '$': { // 'android:name': 'android.max_aspect', // 'android:value': '2.1' // } // } // ] result.manifest["application"]["meta-data"]=[ { '$': { 'android:name': 'android.max_aspect', 'android:value': '2.1' } } ] // result.manifest["application"]["$"]["android:resizeableActivity"]="true" //将返回的结果再次格式化 // console.log(JSON.stringify(result)); //json --> xml var builder = new xml2js.Builder( ); var jsonxml = builder.buildObject(result); fs.writeFileSync('platforms/android/AndroidManifest.xml', jsonxml); console.log('----------'); console.log('更新AndroidManifest.xml适配全面屏'); console.log('----------'); }); })