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('----------'); });
})
cordova 5.4版本 适配全面屏 底部黑边问题的更多相关文章
- react native Expo适配全面屏/Expo识别全面屏和正常屏
一.最新版本的expo已经默认支持了全面屏,即不会像react native cli一样出现底部黑边 二.但是全面屏通过Dimensions.get('window')获取的高度还是不准确,因为全面屏 ...
- Ionic5沉浸式状态栏 适配全面屏
1. 在platforms/android/app/src/main目录中找到AndroidManifest.xml文件,修改文件中manifest → application → activity标 ...
- RN Android全面屏适配
像现在市面上新出的手机,例如华为P30 pro,小米9,iPhone XS MAX,屏占比都惊人的达到90%以上,这些手机具备了以下几个特点 大,屏占比高,长宽比都不再是16:9,都达到了19.5:9 ...
- Flutter全面屏适配
笔者在这篇文章ReactNative全面屏(Android)适配问题提及了现在的全面屏问题,不仅是Android平台,IOS平台也是,给我的感觉就是手机越来越长了. 现在的手机长宽比早就不是之前的16 ...
- Android全面屏适配
什么是全面屏 概念 很多人可能把全面屏跟曲面屏混淆,其实这是两个不同的概念. 一般手机的屏幕纵横比为16:9,如1080x1920.1440x2560等,其比值为1.777777……,全面屏手机出现之 ...
- 微信小程序 自定义导航组件 nav头部 全面屏设计
nav-dynamic 微信小程序自定义nav头部组件:适配全面屏设计: 实现功能 初始进入页面时,展示初始状态下的nav样式: 页面滚动时,监听页面滚动事件,展示滚动状态下的nav样式: 根据配置字 ...
- Android最佳实践之SystemBar状态栏全版本适配方案
前言 自从MD设计规范出来后,关于系统状态栏的适配越受到关注,因为MD在5.0以后把系统状态栏的颜色改为可由开发者配置的,而在5.0之前则无法指定状态栏的颜色,所以这篇就说说使用Toolbar对系统状 ...
- [COCOS2DX-LUA]0-005.cocos2dx中关于全面屏和折叠屏的适配的一些见解
1.随着科技的发展,我们可以看到从iphoneX的刘海屏开始,引发了各种全面屏和异形屏的出现.这是科技的进步,但是对于各大的应用厂商来说,苦不堪言. 2.当然 ,吐槽归吐槽,我们还是要理智的去对待这个 ...
- 版本适配 sdk version MD
Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...
随机推荐
- java 多线程四
java 多线程一 java 多线程二 java 多线程三 java 多线程四 一个生产者,消费者的例子: import java.util.Stack; /** * Created by root ...
- python学习笔记:"爬虫+有道词典"实现一个简单的英译汉程序
1.有道的翻译 网页:www.youdao.com Fig1 Fig2 Fig3 Fig4 再次点击"自动翻译"->选中'Network'->选中'第一项',如下: F ...
- numpy中 array数组的shape属性
numpy.array 的shape属性理解 在码最邻近算法(K-Nearest Neighbor)的过程中,发现示例使用了numpy的array数组管理,其中关于array数组的shape(状态)属 ...
- 【转】wpf中的xmlns命名空间为什么是一个网址,代表了什么意思
wpf中的xmlns命名空间为什么是一个网址,代表了什么意思 http://blog.csdn.net/catshitone/article/details/71213371
- tomcat中gzip压缩
在tomcat中压缩文件,修改server.xml文件中的配置 <Connector port="8080" protocol="HTTP/1.1" co ...
- 微信支付之JsApi支付
常见问题:金额错误,微信金额是int类型,最小单位为分,即是1 客户端调用微信支付的时候一闪而过:这个原因是因为微信商户后台支付目录地址没设置对,导致js调用的时候验证没通过 .aspx页面设置: x ...
- Android 自定义View二(深入了解自定义属性attrs.xml)
1.为什么要自定义属性 要使用属性,首先这个属性应该存在,所以如果我们要使用自己的属性,必须要先把他定义出来才能使用.但我们平时在写布局文件的时候好像没有自己定义属性,但我们照样可以用很多属性,这是为 ...
- input text 去掉标签下拉提示
autocomplete 属性 autocomplete 属性规定输入字段是否应该启用自动完成功能. 自动完成允许浏览器预测对字段的输入.当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在 ...
- jade(pug)学习和使用
由于版权问题,现已改名pug.但无须担心,几乎没什么区别.就算依然使用jade也不会有太大影响. 慢慢迁移过渡即可 # 官网 https://pugjs.org # github https:// ...
- poj2828 伸展树模拟
用伸展树模拟插队比线段树快乐3倍.. 但是pojT了.别的oj可以过,直接贴代码. 每次更新时,找到第pos个人,splay到根,然后作为新root的左子树即可 #include<iostrea ...