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 ...
随机推荐
- 基于URL的权限管理(三)
思路:先创建一个专门的类ActiveUser用于存储用户登录的信息,主要用于存储用户id,账户,名称,菜单,权限. 认证拦截器主要是查看用户是否已登陆,如果没有转发到登陆界面,用户用账户跟密码登录时候 ...
- Python3学习笔记23-StringIO和BytesIO
StringIO 很多时候数据读取不一定是文件,也可以在内存中 StringIO顾名思义就是在内存中读写str 要把str写入StringIO,我们需要先创建一个StringIO,然后像文件一样写入即 ...
- 一个python脚本解决安装mq的依赖问题
import tarfile import sys,os from _utils.patrol2 import run_cmd import zipfile def get_version(filen ...
- Oracle 正则表达式函数-REGEXP_REPLACE
背景 当初写oracle的一个存储过程,以前不知道sql里也有正则表达式,关于正则表达式教程很多了,这里只是记录下Oracle也有这个功能,下次再有类似需求用这个处理的确方便很多. 想起存储过程,就想 ...
- Android:ZoomControls控件
ZoomControls控件 //_ZoomControls.java public class _ZoomControls extends Activity{ @Override protected ...
- IDEA运行TestNG报错rg.testng.TestNGException: org.xml.sax.SAXParseException;
从eclipse复制的依赖注解,一运行测试脚本发现报错如下: "F:\Program Files\Java\jdk1.7.0_17\bin\java" -ea -Didea.lau ...
- 前端开发必须知道的JS之闭包及应用
本文讲的是函数闭包,不涉及对象闭包(如用with实现).如果你觉得我说的有偏差,欢迎拍砖,欢迎指教. 在前端开发必须知道的JS之原型和继承一文中说过下面写篇闭包,加之最近越来越发现需要加强我的闭包应用 ...
- 选择一个 HTTP 状态码不再是一件难事 – Racksburg《转载》
本文转载自:众成翻译 译者:十年踪迹 链接:http://www.zcfy.cc/article/904 原文:http://racksburg.com/choosing-an-http-status ...
- 【python】已安装模块提示ImportError: No module named
今天遇到了一个问题,运行代码时出现错误 Traceback (most recent call last): File , in <module> import zmq ImportErr ...
- python + selenium 模块封装及参数化
模块封装 示例代码: baidu.py from time import sleep from selenium import webdriver driver = webdriver.Chrome( ...