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 ...
随机推荐
- linux 下安装 oracle
http://yourcouner.blog.51cto.com/59520/91156 一.RedHat AS4系统安装: 磁盘配置: 设备 类型 大小 / ext3 39911 swap 1024 ...
- CentOS7_JDK安装和环境变量配置
1.下载 curl -O http://download.Oracle.com/otn-pub/java/jdk/7u79-b15/jdk-7u79-linux-x64.tar.gz 2.改名 mv ...
- ppt 制作圆角三角形
制作圆角三角形: PART 01 :插入三角形与三个等大的圆形: PART 02 :利用[任意多边形]和[合并形状-剪除]获得缺三角: (先选中大三角形,然后再选中任意多边形,"格式&quo ...
- ubuntu下安装搜狗输入法以及出现不能输入中文的解决办法
1. 官网下载安装包 http://pinyin.sogou.com/linux/?r=pinyin 下载你需要的版本,这里选择64位版. 2. 进入软件中心安装 3. 修改ibus为fcitx im ...
- linux 查看cpu的使用百分比
先安装 sudo apt-get install sysstat 然后: mpstat -u 2 5
- nginx报错:403 Forbidden 并且访问首页index.php是下载文件的状态
nginx报错:403 Forbidden 并且访问首页index.php是下载文件的状态,不能正常解析php 系统有其他两个站访问是正常的 看日志没有看到明显的错误 搜索了下: 答案如下: php的 ...
- servlet请求中的信息
在servlet中HttpServeltRequest中有一个方法getRequestURL() 假如我们平常输入的地址是:localhost/Demo1/TestServlet?hello=worl ...
- 使用 CSS overscroll-behavior 控制滚动行为:自定义下拉刷新和溢出效果
CSS 的新属性 overscroll-behavior 允许开发者覆盖默认的浏览器滚动行为,一般用在滚动到顶部或者底部. 背景 滚动边界和滚动链接(boundary & chaining) ...
- WebMvcConfigurerAdapter已过时
Spring Boot2.0的版本(创建的时候自动选择的这个版本),然后编译器告诉我WebMvcConfigurerAdapter已过时了 @Deprecated public abstract cl ...
- 前端工程化-webpack篇之babel-polyfill与babel-runtime(三)
关于 Babel 如果我们没有配置一些规则,Babel 默认只转换新的 JavaScript 句法(syntax),而不转换新的 API,比如 Iterator.Generator.Set.Maps. ...