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 ...
随机推荐
- spring整合ehcache2.5.2缓存异常-- net.sf.ehcache.CacheException
报错如下: The source of the existing CacheManager is: DefaultConfigurationSource [ ehcache.xml or ehcach ...
- Three.js基础探寻二——正交投影照相机
本篇主要介绍照相机中的正交投影照相机. 第一篇传送门:Three.js基础探寻一 1.照相机 图形学中的照相机定义了三维空间到二维屏幕的投影方式. 针对投影方式照相机分为正交投影照相机和透视投影照相机 ...
- 【Python】批量查询-提取站长之家IP批量查询的结果加强版本v3.0
1.工具说明 写报告的时候为了细致性,要把IP地址对应的地区给整理出来.500多条IP地址找出对应地区复制粘贴到报告里整了一个上午. 为了下次更好的完成这项重复性很高的工作,所以写了这个小的脚本. 某 ...
- H3C SNMP OID
有两种mib-style [1]老些的设备 cpu 使用率OID: .1.3.6.1.4.1.25506.2.6.1.1.1.1.6.slot 内存使用率OID: .1.3.6.1.4.1.2550 ...
- C# 汉字与区位码之间的相互转换(中文数字字母可以,支持空格,但是特殊字符未来得及测试)
using System; using System.Text; namespace Test { class MainClass { /// <summary> /// 中文空白字符,用 ...
- CentOS 6.5环境实现corosync+pacemaker实现DRBD高可用
DRBD (Distributed Replicated Block Device)分布式复制块设备,它是 Linux 平台上的分散式储存系统,通常用于高可用性(high availability, ...
- iptables实现网络防火墙及地址转换
iptables主机防火墙功能及常用命令 FSM:Finite State Machine 有限状态机 客户端:closed -->syn_sent -->established --&g ...
- 转载:《理解RESTful架构》 阮一峰
原文:http://www.ruanyifeng.com/blog/2011/09/restful.html 越来越多的人开始意识到,网站即软件,而且是一种新型的软件. 这种"互联网软件&q ...
- sklearn 岭回归
可以理解的原理描述: [机器学习]岭回归(L2正则) 最小二乘法与岭回归的介绍与对比 多重共线性的解决方法之——岭回归与LASSO
- Python-HTML CSS题目
一.简答1.手写html模板,并解释模板每个标签的作用 <!doctype html> 文件类型html <html>页面根 <head>后勤内容 <meta ...