首页 > 其他分享 >解决iOS的内嵌H5不能全屏问题

解决iOS的内嵌H5不能全屏问题

时间:2024-02-22 19:56:34浏览次数:33  
标签:bottom iOS IOS H5 添加 全屏

前言

  IOS和安卓不同的地方在于设置了安全距离,所以需要特别的设置,否则设置了全屏会出现顶部有一片空白区域的问题。

 

解决方法:

1、iOS添加代码

	if (@available(iOS 11.0, *)) {
   		g_web.scrollView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;
 	} else {
 		self.edgesForExtendedLayout = UIRectEdgeNone;
 	}

  

2、H5 添加meta

<meta name="viewport" content=" viewport-fit=cover">

  添加了viewport-fit=cover放到IOS机上就可以全屏了,如果不行那么一定是IOS的问题,让他自己检查代码(我就是相信了IOS同事说他那边没问题,要靠h5解决,白白浪费了一个下午的时间去查资料)

 

3、添加env 和 constant 适配机型

body {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}

  

最后,非常感谢 我的故事没编好 以及 方小川的前端博客 ,在此还是提醒各位一下,真的不要太相信同事说的话,当自己的代码没问题且反复验证不生效的情况,直接跑去对方工位查看对方的代码也是一种解决方式。

 

标签:bottom,iOS,IOS,H5,添加,全屏
From: https://www.cnblogs.com/zxd66666/p/18028021

相关文章

  • 深度解析:iOS开发中Masonry第三方库可能出现的布局崩溃问题及解决方案
    在iOS应用开发过程中,自动布局是一个至关重要的环节。作为广受欢迎的第三方布局框架,Masonry以其简洁的链式语法和强大的功能为开发者提供了便利。然而,在实际使用过程中,如果不正确地配置约束,可能会导致界面布局崩溃的问题。本文将通过具体代码示例探讨几种常见的Masonry布局崩溃原因......
  • H5无插件流媒体播放器EasyPlayer.js集成后不能自动播放是什么原因?
    流媒体播放器EasyPlayer是TSINGSEE青犀流媒体组件系列中关注度较高的产品,经过多年的发展和迭代,目前已经有多个应用版本,包括RTSP版、RTMP版、Pro版,以及js版,其中js版本作为网页播放器,受到了用户的广泛使用。在功能上,EasyPlayer支持直播、点播、录像、快照截图、MP4播放、多屏播放、......
  • 关于ios手机Date对象的时间格式兼容问题
    通常后台返回给前端的字符串的时间数据格式是这样的:2019-8-512:18:35,要计算日期的时候需要把日期转换成时间戳才方便计算。在安卓chrome等浏览器,此格式可以直接传入到newDate(date)里,获取对应的日期,然后调用getTime方法,既可以获得相应时间的时间戳,像这样:letdate='2019-8......
  • [转]多端统一框架Taro基础教程(支持转小程序/React Native(安卓/iOS)/鸿蒙)
    原文地址:多端统一框架Taro基础教程-知乎随着微信小程序越来越火,其它平台也都推出了自己的小程序产品(支付宝、快应用、百度、抖音)。小程序最大的特点就是平台能为你提供强大的流量,所以小程序开发变成了前端必会知识。作为一个从来不想写程序,一心只想泡妹子的程序员,我一直期盼......
  • 苹果科技春晚!iPhone 16系列看点汇总:设计、性能和iOS都升级了
    历年的苹果特别活动都能称得上是“科技圈春晚”,不知道果粉们对今年的iPhone 15系列都满意吗?反正从市场成绩上看,iPhone15系列的销量在国内市场已经不再保持领先地位,23年12月的市场份额同比减少17.7%之多,看来不满意,没换机的果粉还是占了多数。现在的消费者们已经不再满足于简单的......
  • 学习总结基于VUE+ASP.NET Core mvc+EFCore+Axios.js+ehcart.js开发一个web应用
    Vue是一个用于构建用户界面(基于数据渲染出用户看到的页面)的渐进式(循序渐进)框架。分为(声明式渲染,基于js包、组建系统、客户端路由、大规模状态管理和构建工具)Vue的使用方法分为:1.Vue核心包开发:局部模块改造;2.Vue核心包+Vue插件工程化开发:整站开发1.开始之前准备下述包 在prog......
  • uniapp的H5端微信与支付宝支付(包括PC端与移动端)
    PC端:大致流程为1、请求创建订单接口传递正确参数(例如openid、金额、开始结束时间等),此接口会返回一个图片,或网络图片,或base64图片,这个图片是一张二维码;2、前端拿到这个二维码渲染到屏幕上并开始启动定时器,每过一秒请求一次查询支付结果接口,查询是否支付成功;3、支付宝支付可能会......
  • 唯一客服系统:Golang开发客服系统源码,支持网页,H5,APP,微信小程序公众号等接入,商家有PC端
    本系统采用GolangGin框架+GORM+MySQL+Vue+ElementUI开发的独立高性能在线客服系统。客服系统访客端支持PC端、移动端、小程序、公众号中接入客服,利用超链接、网页内嵌、二维码、定制对接等方式让网上所有通道都可以快速通过本系统联系到商家。 服务端可编译为二进制程序包,无......
  • H5如何实现唤起APP唤端技术
    这项技术我们就可以实现H5唤起APP应用了,现阶段的引流方式大都得益于这种技术,比如广告投放、用户拉新、引流等。虾分发 xiafenfa.com。唤端技术体验过后,我们就来聊一聊它的实现技术是怎样的,唤端技术我们也称之为deeplink技术。当然,不同平台的实现方式有些不同,一般常见的有这几种......
  • 苹果iPhone手机Trollstore巨魔2必备神器Misaka.ipa签名安装支持iOS15.5~16.6.1错误如
    文末附工具链接和视频介绍引言上一篇,介绍了哪些设备可以安装巨魔2:巨魔TrollStore2已经支持更多版本和型号A12-A17今天继续实战介绍,如何在iPhone上安装巨魔TrollStore2的前置工作,通过Misaka来安装巨魔TrollStore2,先进行Misaka.ipa签名安装。Misaka支持哪些iOS版本和方式......