IOS、Android展示半屏H5页面半屏白色问题

最新推荐文章于 2024-04-02 19:14:15 发布
最新推荐文章于 2024-04-02 19:14:15 发布
阅读量983 收藏 1
点赞数 1
分类专栏： 看了能直接用系列 文章标签： vue android ios css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/supremeJacob/article/details/115978962
版权

问题背景：

产品需要H5以半屏的形式显示在IOS、Android，经过测试发现在IOS端半屏为白色不为透明

解决方案：

前端这边

在这里插入图片描述
在这里插入图片描述
这么做主要是让父类half高度隐式设为0，能展示客户端内容，加入类shadow主要是为了绑定点击空白处能关闭弹框的事件

客户端这边

需要加上这两行代码：
[webView setBackgroundColor:[UIColorclearColor]];
[webView setOpaque:NO]; 这行不设置默认是yes

H5｜小程序｜RN页面适配iphoneX【异形屏幕｜底部安全区域】
DOT_wen的博客
11-22 2106
需求场景： H5页面有一个吸底的按钮，但是异形屏幕【iPhonex等】，按钮一大半会被系统的小黑条挡住。需要适配在异形屏幕下，完整展示按钮，不被遮挡。 查了一些资料，发现为了应对刘海屏幕，苹果也给出了响应的策略 一个meta头 <meta name="viewport" content="viewport-fit=cover"> meta 有三个属性 contain 可视化窗口完全包含网页内容 cover 网页内容完全覆盖 （小程序默认） auto 默认值和 contain 一样（h5网页
html5页面四周不留白,关于微信H5页面软键盘输入后页面下方留白的问题（仅IOS）...
weixin_32532029的博客
06-03 632
前言：手上的微信H5项目做的接近尾声了，结果元旦回来没多久测试说ios端出现了bug，软键盘输完隐藏后页面不会回弹，下方会有一大块留白。之前没出现过这种问题，安卓也没问题。。测试说可能是因为最近她更新了ios版本。。。一、问题页面示例下方有一大块留白二、问题分析最近微信和ios都有版本升级，不知道是哪边升级造成的，但是经过测试人员反馈，软键盘收起后，再滚动一下页面，下面的留白就会消失。所以只要在输...
H5开发在微信浏览器上，加载时“白屏”问题
热门推荐
jilinmly的博客
10-24 2万+
前天开发了一个简单的邀请函，整体8个页面，不足8M，在PC端模拟器上打开没有问题，在手机的其他浏览器中也没有问题。唯独在微信浏览器中加载时会出现长时间白屏，用户体验很不好 一番检查下来，因为写的太随心了，最后发现了两个BUG   ———————————正文——————————— 1. 不要把太多（ 最好没有）需要下载或者加载速度过慢的js放在body之前，因为会阻断H5dom的渲染，那么在...
网页显示半屏
xuhaili85的专栏
12-03 1184
我得网页时使用struts+Hibernate编写的，为什么刷新多次会出现显示半屏的现象。还使用java自定义标签。是不是因为标签。 
小程序半屏内嵌案例
xy_peng的博客
04-02 1718
小游戏（暂排除）。；其中嵌入半屏小程序功能首次推出在 21年10月份，功能成熟在22年3月份、2023年6月份支持可以全屏嵌入。
H5移动端input唤起键盘，遮挡内容解决
Jensonhui's Blog
08-13 1087
vue开发直接@focus，html页面需动态绑定focus事件 vue为例：<input type="text" @focus="scrollViewPosition" /> scrollViewPosition () { try { if (document.activeElement.tagName === "INPUT") { // 安卓下可能有延迟 setTimeout(() => { document.activ...
详解移动端HTML5页面端去掉input输入框的白色背景和边框（兼容Android和ios）
12-14
本篇文章将详细讲解如何去除`input`输入框在Android和iOS设备上的默认白色背景和边框，从而实现更加美观、协调的界面效果。 首先，问题的起因在于开发者在创建一个订单查询功能时，使用了`<input type="date">`标签...
iOS H5 history.back() 返回上一路由 页面白屏
yujin0213的博客
09-08 5809
问题描述 最近在做H5项目的时候，发现使用history.back()在IOS上返回上一页的时候，会有很严重的bug。我的场景是列表页滚动了超出一屏之后，进入详情页，再点击返回列表页，在iOS上就出现了白屏的现象，但是触屏或者滑一下，页面就又恢复了。 解决方案 1、使用绝对定位 这个也是参考了网上的写法，把列表页高度设为100%，绝对定位 .container { positio...
H5页面（八）常见的问题二------填坑
斗师——Ace
06-09 2083
添加小程序，兑换各种视频教程/数据资源。 1. 添加到主屏后的标题（IOS） <meta name="apple-mobile-web-app-title" content="标题"> 2. 启用 WebApp 全屏模式（IOS） 当网站添加到主屏幕后再点击进行启动时，可隐藏地址栏（从浏览器跳转或输入链接进入并没有此效果） <meta name="app...
h5 移动端 iphone键盘弹起再收回的时候，页面会留白，需要手动下拉（android没有问题）
weixin_44864084的博客
01-06 975
h5 移动端 iphone键盘弹起再收回的时候，页面会留白，需要手动下拉 一、js监听键盘弹出和收起事件 1、在ios中软键盘弹起时，仅会引起$(‘body’).scrollTop值改变，但是我们可以通过输入框的获取焦点情况来做判断，但也只能在ios中采用这个方案， 因为在android中存在主动收起键盘后，但输入框并没有失焦，而ios中键盘收起后就会失焦； 2、在android中软键盘弹起或收起...
Android中实现直播带货功能
u012556114的博客
02-28 1851
一、这两年直播带货非常火，前段时间我们项目需求也提了这个功能，于是查看抖音、快手、淘宝的实现方式，结合咱们自己的项目，直播带货有2种场景： 1.一种是在单一页面进行商品购买. 2.一种是全局悬浮窗，在所有页面都可以去购物. 二、单一页面一个拖拽按钮就可以实现，全局悬浮窗比较麻烦，由于涉及到多个页面的跳转传递数据和回收问题。 三、单个页面的悬浮按钮，可以用一个自定义的可拖拽按钮来实现. ...
微信H5页面前端开发，大多数人都会遇到的几个兼容性坑(转载)
weixin_30399055的博客
08-20 1419
1、ios端兼容input光标高度 问题详情描述：input输入框光标，在安卓手机上显示没有问题，但是在苹果手机上 当点击输入的时候，光标的高度和父盒子的高度一样。例如下图，左图是正常所期待的输入框光标，右边是ios的input光标。 出现原因分析：通常我们习惯用height属性设置行间的高度和line-height属性设置行间的距离（行高），当点击输入的时候，光标的高度就自动...
android原生WebView打开h5页面加载显示不完整错乱问题
yhy123456q的博客
02-23 4268
一、错误的效果图二、正确的效果图：解决方案：给webView增加属性：webView.getSettings().setDomStorageEnabled(true);///有可能是DOM储存API没有打开
html安卓手机打开后只有半屏,宽度设置100%在移动端时变成一半
weixin_35792236的博客
06-15 1186
html代码：手机电脑DIY数码外设智能css代码：.nav-body{position: relative;overflow: hidden;width:100%;height: 400px;}.nav-img{position: absolute;z-index:-1;}.nav-img a{display: block;width:100%;}.nav-img img{height: 400...
IOS内嵌H5页面，返回出现半截白屏问题及解决方案
Jensonhui's Blog
03-22 5565
场景： 【ios内嵌加载h5页面】A页面加载数据 ---> 跳转B页面后返回 --> A页面重新请求加载 问题：上述场景步骤后，返回A页面会显示一部分白屏，随意滑动页面后，页面显示完整（android下没事） 分析：可能跟ios回弹效果有关系，iOS WebView加载网页触摸白屏bug排查 解决： 方案一：（未使用） html, body { width: 100%; height: 100%; margin: 0; padding: 0; position:
原声js控制浏览器全屏或者退出全屏
qq_41114603的博客
09-29 1359
开启全屏 if (document.documentElement.requestFullscreen) { document.documentElement.requestFullscreen(); } //FireFox else if (document.documentElement.mozRequestFullScreen) { document.docum...
完全解决ios页面返回半截白屏或全白屏问题的方法
callbackkkkkk的博客
07-14 2839
问题描述：列表页面——>详情页面——>ios自带的返回——>白屏 手动点击白屏处——>问题解决； 原因是，发现在ios 机器上使用webview 开发Vue项目时候，go history (-1)，无法将body 的高度拉掉，使得遮住，触发轻点击，方可消除该遮罩 解决1.history.scrollRestoration='manual'; 原理：更改history对象的默认滚动属性值 History.scrollRestoration 定义：允许web应用程序在历史导航上显式
h5改安卓手机顶部状态栏
最新发布
01-04
### 修改 H5 页面中 Android 手机顶部状态栏的颜色或样式 对于 HTML5 应用程序，特别是基于 Html5Plus (H5+) 的应用程序，在 Android 设备上可以利用特定的 JavaScript API 来控制和自定义浏览器窗口之外的部分，比如顶部的状态栏。 #### 使用 `plus.navigator` 对象配置状态栏风格 为了改变状态栏的文字颜色（仅限于黑色或白色），可调用 `plus.navigator.setStatusBarStyle()` 方法并传入参数 `'dark'` 或者 `'light'`。这会使得状态栏内的图标及时间等信息显示为深色或是浅色字体[^2]： ```javascript // 设置状态栏文字颜色为白色 plus.navigator.setStatusBarStyle('light'); ``` #### 实现沉浸式效果与适配布局 当启用沉浸模式时，即让网页内容延伸到状态栏下方，通常需要处理好页面顶端的内容不被遮挡的问题。通过获取状态栏高度，并据此调整页面元素的位置能够有效解决这一问题[^4]: ```javascript document.addEventListener('plusready', function () { var statusBarHeight = plus.navigator.getStatusbarHeight(); // 假设有一个 header 元素位于页面最上方 document.querySelector('.header').style.paddingTop = `${statusBarHeight}px`; }); ``` #### 自定义状态栏背景色彩 除了更改文本颜色外，还可以设定状态栏本身的底色。虽然原生 Android 开发可能涉及 XML 文件中的属性设置[^3]，但在 H5+ 中可以直接借助 CSS 和上述提到的方法间接影响视觉呈现: ```css body::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: env(safe-area-inset-top); /* 支持 iOS 安全区域 */ background-color: #yourDesiredColor; /* 替换成想要的颜色 */ z-index: 9998; } ``` 此方法创建了一个伪元素覆盖在实际状态栏之上，从而达到改变其外观的目的。需要注意的是，这种方法依赖于环境变量 (`env`) 函数的支持程度，某些旧版本浏览器可能会有兼容性问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值