解决 iPhone X 屏幕底部空白问题

最新推荐文章于 2023-04-06 10:24:16 发布
最新推荐文章于 2023-04-06 10:24:16 发布
阅读量2.7k 收藏 1
点赞数 1
分类专栏： HTML5 公众号 文章标签： iPhone iPhoneXS XS
原文链接：https://www.jianshu.com/p/e4a7d95b288b
版权

最近做公众号发现 iPhone X 日了狗了，找了半天问题，最后还是度娘到了，很详细 走你-链接: https://www.jianshu.com/p/e4a7d95b288b

标签里加：如下代码 
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

如果在meta加了空白没了，但是还在那个位置加个padding:0;试试

丨丨三戒丶
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
iOS代码动态消除iPhone X底部工具条(ToolBar)与键盘间的夹缝
享受开发，颠倒银河
04-23 2160
在App界面底部增加工具条并不少见,在工具条上增加输入框更所谓是"应知应会".下面本猫就向大家介绍如何适配iPhoneX中底部工具条与弹出键盘的相对位置.
H5页面页面在iphoneX手机上底部会有留白解决办法
飞翔的熊blabla
05-18 2468
H5页面页面在iphoneX手机上底部会有留白解决办法 在meta viewport标签里加属性：viewport-fit=cover；如下 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no, ...
移动端浏览器上拉上滑地址栏隐藏，页面底部空白解决方案
hochinchan的博客
02-08 2514
解决方案是给容器加上css属性position:fixed 最近在完成一个点击图片显示遮罩，让遮罩占满全屏并禁止页面滚动的功能时，发现禁止滚动后浏览器仍然可以通过上滑和下滑来触发地地址栏的隐藏与显示，导致当上滑触发地址栏时内容可视区高度变大，页面底部出现一小块与地址栏高度一样的区域没有被遮罩层遮到 ...
解决网页、H5页面在手机端访问时，底部会有一段莫名其妙的空白，大约有几百像素高的留白
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
04-06 1757
仅需要执行下面这段代码即可解决上图空白区域的留白问题。
iPhoneX无导航栏页面适配问题解决方案
01-06
原全屏适配在iPhoneX会由于安全区域的变化导致显示不全。 解决方案如下： 在self.view上添加一个view，剩下的视图基于该view布局，view的约束随self.view.safeAreaInsets的改变需要重置： - (void)viewDidLoad { ...
IphoneX底部适配的实现
12-10
这里，`.contact-box`元素添加了`fix-iphonex-bottom`类，这个类会将元素的底部内边距调整为34px，以避开iPhone X系列的底部触控区域。而`.iphone-footer-bg`元素则添加了`iphonexshow`类，显示一个34px高的背景条，...
iphoneX Home Bar 类似苹果底部操作条
12-07
想要感受最新iPhone X 或者替代坏掉的 home 键？ 这个应用可以添加类似 iPhone X 的 Home 键到你的屏幕。 这个 Home 键非常简单。只有上划，左划或者右划三个动作来启动所选择的动作。
ios 11和iphone x的相关适配问题及解决方法
08-28
iOS 11和iPhone X的相关适配问题及解决方法是指在iOS 11中出现的一些适配问题，例如tableView莫名偏移问题和scrollView默认位移问题，以及iPhone X的特殊适配问题。下面是相关知识点的详细介绍。 1. 安全区域（Safe...
uni-app页面下方空白解决方案
qq_43644046的博客
03-09 4899
uniapp开发app时候，出现了空白，即使html,body设置100%也没用，情况如图 下方空白之跟随着详情介绍的内容自由变化背景色 于是我把详情介绍这个<view>添加了class，设置了padding-buttom:150rpx,大家可以适量取值 于是也算成功 但是这也有弊端，因为详情介绍长短不一，设置过小会出现空白，如果设置过长，会导致页面下面多了有背景色的空缺。 这是比较简单的方式，还有个比较好的思路，判断一下界面长度，如果超出界面就设置100%，如果没有超出，
IOS 兼容iphonex 系列手机安全区域下，底部吸底样式问题
旧忆时光的博客
04-20 511
1.由于为了适配IphoneX系列得顶部和底部，设置出了安全区域，上下2部分空出白色区域（34px,来装载底部得控制条和顶部栏），但是由于底部吸底得公共组件也是白色，与底部空出得安全区域接洽，造成底部吸底组件空出得空白区域较多显得突兀（padding-bottom+底部安全padding-top） 判断dang’qian由于为了适配IphoneX系列得顶部和底部，设置出了安全区域，上下2部分空出白色区域（34px,来装载底部得控制条和顶部栏），但是由于底部吸底得公共组件也是白色，与底部空出得安全区域接洽，
解决 ios 11 和 h5 页面在 wkwebview 上显示, footer 设置 bottom 为 0 时, 顶部会出现留白...
weixin_33841722的博客
12-21 1974
&lt;一&gt;: 本人亲自测试, 出现以上情况是在 页面内容不足以撑满整个屏幕 的情况下才会出现 &lt;二&gt;: 解决方法一 01: 添加 meta 标签 =&gt; 02: &lt;meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1....
iOS WKWebView交互实现及iOS13以上, iOS11以下适配
daozhishier的博客
04-09 1596
笔者性懒,腹中无墨. 以下简单列出WKWebView的使用及注意事项. 初始化webview及事件监听 fileprivate lazy var webView: WKWebView = { let webConfiguration = WKWebViewConfiguration() webConfiguration.preferences = WKP...
wkwebview 下移20像素_2018 自适应WKWebView高度
weixin_35710158的博客
01-12 171
ArticalDetailCell.m//// ArticalDetailCell.m// BlockChainNews//// Created by zsm on 2018/5/30.// Copyright © 2018年 XinHuoKeJi. All rights reserved.//#import "ArticalDetailCell.h"@interface ArticalD...
#iOS适配iPhoneX上下出现黑色区域
weixin_34248258的博客
04-08 665
#iOS适配iPhoneX上下出现黑色区域 最近在写swift重构项目，在适配项目的时候出现了下图的情况 大家可以看到我的navigationBar设置为了蓝色，view为白色但是屏幕上下方出现了黑色区域，我一开始以为自己需要给widow添加bounds但是修改后没有用。然后调节状态栏高度，调节导航栏高度都无用，此时，内心是崩溃的。然后Google了半小时，终于找到了原因。 先上图 是的，你没...
WKWebView空白页面解决办法
weixin_41755781的博客
07-14 1966
WKWebView出现网页空白解决方法 设置App Sandbox 在info.list写入如下代码 NSAppTransportSecurity NSAllowsArbitraryLoads 加入WebKit.framework
解决uni-app开发中iphoneX下背景不能全屏铺满的问题
dengke2247的博客
07-25 2685
使用原生占位（仅App端支持） mainfest.json 文件 app-plus 节点下配置 safearea "safearea": { "background": "#CCCCCC", "bottom": { "offset": "auto" } } 不使用原生占位（非App端可以不配置main...
WKWebView侧边大面积空白（白边）问题
u012954219的博客
08-08 2044
1.问题描述 我的mac系统是今天刚装好的，xcode也是刚刚下载完的，除了添加三行代码以及一个webview其它选项均为默认，但是出现如图上绿色部分所示的大面积白边。 2.解决方法 ...
iOS 去掉顶部(或底部)出现一块空白区域
H.A.N的博客
09-23 7171
//去掉顶部(或底部)出现一块空白区域 self.automaticallyAdjustsScrollViewInsets = NO;
uniapp适配iphonex底部黑线
最新发布
05-01
Uniapp是一种跨平台开发框架，但是在iPhone X上，由于屏幕底部的刘海，导致底部出现了一条黑线。为了适配iPhone X，需要进行以下操作： 1. 在manifest.json文件中，设置“navigationStyle”: "custom"，自定义导航栏。 2. 在App.vue文件中，使用状态栏插件设置状态栏高度。 3. 在pages.json文件中，设置"safeArea": true，使用安全区域。 4. 在index.html中，添加以下标签： <meta name="viewport" content="viewport-fit=cover"/> 5. 在App.vue文件中，添加以下代码： .uni-app .uni-page-body { padding-bottom: env(safe-area-inset-bottom); } 这些操作将使应用程序适应iPhone X，并在底部隐藏黑线。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值