uni-app webview在iPhone 6、7、8下无法全屏

uni-app webview在iPhone 6、7、8下无法全屏

开发环境 版本号 项目创建方式
Mac macos Mojave 10.14.6 (18G95) HBuilderX

示例代码：

页面：

<template>
<view>
<web-view src="http://127.0.0.1"></web-view>
</view>
</template> 

<script>
export default {
data() {
return {
title: 'Hello'
}
},
onLoad() {
// plus.navigator.setFullscreen(true);
},
methods: {}
}
</script> 

<style>
html,body,page{
background: #8a8a8a;
}
</style> 

pages.json
{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"app-plus": {
"titleNView": false
}
}
}
],
"globalStyle": {
"navigationStyle": "custom",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#6aff0d",
"backgroundColor": "#f52528"
}
}

manifest
{
"name" : "test",
"appid" : "",
"description" : "",
"versionName" : "1.0.0",
"versionCode" : "100",
"transformPx" : false,
/* 5+App特有相关 */
"app-plus" : {
"usingComponents" : true,
"nvueCompiler" : "uni-app",
"compilerVersion" : 3,
"splashscreen" : {
"alwaysShowBeforeRender" : true,
"waiting" : true,
"autoclose" : true,
"delay" : 0
},
/* 模块配置 */
"modules" : {},
/* 应用发布信息 */
"distribute" : {
/* android打包配置 */
"android" : {
"permissions" : [
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
"<uses-permission android:name=\"android.permission.READ_CONTACTS\"/>",
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
"<uses-permission android:name=\"android.permission.WRITE_CONTACTS\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
"<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>",
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
"<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>",
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
"<uses-permission android:name=\"android.permission.CALL_PHONE\"/>",
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
"<uses-feature android:name=\"android.hardware.camera\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>",
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
]
},
/* ios打包配置 */
"ios" : {},
/* SDK配置 */
"sdkConfigs" : {}
}
},
/* 快应用特有相关 */
"quickapp" : {},
/* 小程序特有相关 */
"mp-weixin" : {
"appid" : "",
"setting" : {
"urlCheck" : false
},
"usingComponents" : true
},
"mp-alipay" : {
"usingComponents" : true
},
"mp-baidu" : {
"usingComponents" : true
},
"mp-toutiao" : {
"usingComponents" : true
},
"uniStatistics": {
"enable": false
}
}

操作步骤：

  • 运行页面

预期结果：

  • 全屏

实际结果：

  • 存在状态栏并无内容

bug描述：

iphone 6 7 8 的webview无法全屏， 已增加设置"style": { “app-plus”: { “titleNView”: false } } 如果不是webview正常


更多关于uni-app webview在iPhone 6、7、8下无法全屏的实战教程也可以访问 https://www.itying.com/category-93-b0.html

10 回复

有没有人出来解释一下？

更多关于uni-app webview在iPhone 6、7、8下无法全屏的实战教程也可以访问 https://www.itying.com/category-93-b0.html


你的demo里是啥？<web-view src="http://127.0.0.1"></web-view> </view>？

你说的全屏是什么意思？ plus.navigator.setFullscreen(true); 这个API不起作用？

我测试的iPhone8 模拟器，状态栏没显示，能全屏

回复 CLP: 好了 是alpha的问题，用HbuilderX编译没问题

iPhone8还是不行，不知道什么原因

无法全屏，status状态栏是白条

花钱问也行啊 谁来解答下

大兄弟解决了没？同问啊

这是一个在iPhone 6/7/8上常见的webview全屏显示问题。解决方案如下：

  1. 在pages.json中，确保navigationStyle设置为"custom"：
"globalStyle": {
    "navigationStyle": "custom"
}
  1. 在页面样式中添加以下CSS：
<style>
    html, body, page, view {
        height: 100%;
        width: 100%;
    }
    web-view {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
</style>
  1. 对于iOS设备，可以在onLoad中添加以下代码：
onLoad() {
    // #ifdef APP-PLUS
    if(plus.os.name.toLowerCase() === 'ios') {
        plus.navigator.setFullscreen(true);
    }
    // #endif
}
回到顶部