前言 本文主要针对适配 iPhoneX列出一些关键点，仔细阅读可完美适配 iPhoneX，其中还有一些是适配 iOS11的， 话不多少，开始正餐。 iPhoneX概况一览 ?...5.8吋 375x812 @3x 1125 × 2436 0.4618 如何做到完美适配，使图片等内容不变形呢？...，若没有用系统tabbar，建议判断屏幕高度；之前判断 状态栏高度的方法不妥，如果正在通话状态栏会变高，导致判断异常，下面只是一个例子，请勿直接使用！...关于状态栏另外两个需要注意的地方： 不要在iPhone X下隐藏状态栏，一个原因是显示内容足够高了，另一个是这样内容会被刘海切割。 ?...现在通话或者其它状态下，状态栏高度不会变化了，程序不需要去做兼容。 横屏 在横屏状态下，不能因为刘海的原因将内容向左或者向右便宜，要保证内容的中心对称： ?
目录： 一、状态栏与导航栏 二、设置状态栏显隐与字体样式 三、设置状态栏背景色 四、启动页隐藏状态栏 五、状态栏、导航栏相关的常用宏定义 相关文章：iOS导航栏的使用总结 一、状态栏与导航栏 状态栏...：显示时间、电池等信息 导航栏：显示app页面标题，返回按钮等 iOS7之前：状态栏与导航栏是分开的； iOS7之后：状态栏与导航栏合在一起；导航部分总高度(64)= 状态栏高度(20) +导航栏内容高度...((44） iPhoneX设备出现以后，状态栏的高度变为44，导航栏部分总高度(88) = 状态栏(44) + 导航栏内容高度(44) 二、设置状态栏显隐与字体样式 iOS状态栏可以设置显示和隐藏，也可以设置文字的颜色...，代码的位置很重要；在AppDelegate中写入可以设置整个App页面的状态栏样式； 如果需要单独设置其中一个页面隐藏状态栏，需要在进入页面时设置隐藏，退出页面时设置显示，以保证不影响其他页面的状态栏样式...四、启动页隐藏状态栏 App启动页如果不需要显示状态栏信息，可以设置隐藏。
引言 设置状态栏背景颜色的解决方案： 使用新的API 【statusBarManager】 通过安全区域高度判断是否IphoneX之后的机型：if ([UIApplication sharedApplication...通过上面的代码获取statusBar时，发现每次每次获取都调用 alloc：init的方法，重新生成一个statusBar；然后添加到UIApplication的keyWindow上，再设置背景颜色。...(88.0):(64.0)) /*iPhoneX的状态栏高度差值*/ #define kPtatusBarHeight (CGFloat)(isIphoneX?...; NSLog(@"导航栏高度：%f",navHeight); //获取tabBar的高度 //1.在tabBarController中使用（你的继承自UITabBarController的VC） CGFloat...tabBarHeight = self.tabBar.frame.size.height; NSLog(@"tabBar高度：%f",tabBarHeight); //2.在非tabBarController
安全区域还能够防止内容把状态栏、导航栏、工具栏和标签栏覆盖掉。 注意状态栏的高度。iPhone X 上的状态栏比其他 iPhone 上的更高。...如果你的应用程序的状态栏高度比默认状态栏高，那么你必须更新自己的应用程序，这样才能动态的根据用户设备定位内容。...但是请注意，当背景任务（例如录音和位置跟踪）处于活动状态时，iPhoneX 上的状态栏并不会改变高度。 如果你的应用程序对隐藏状态栏进行了隐藏，那么请重新考虑在 iPhone X 上的设计。...iPhone 上的显示高度为 4.7 英寸，并且它的屏幕上提供了更多的垂直空间内容，状态栏占据了你的应用程序本来可以使用的屏幕区域，状态栏还显示了对人们有用的信息，只有在交换附加值时候才能被隐藏。...同样请确保你的应用程序在支持 Touch ID 的设备上没有引用 Face ID功能。 请参阅 验证。 在使用自定义键盘时，不要重复实现系统提供的键盘功能。
“沉浸播放式”这个概念是我从Android开发里面的沉浸式引申过来的一个概念，沉浸式其实就是隐藏页面顶部的status bar和底部的navigation bar之后呈现出来的页面，一般用户很容易把沉浸式状态栏和透明化状态栏混为一谈...透明化状态栏 ?...too navie，你看我们正常16:9的视频在iphoneX这种18:9的屏幕上是有形变的，而且市面上这么多分辨率不同的设备，如果要追求不同的手机上有最接近的用户体验这么做肯定是不行的，有人可能会提到...，但是两种方式例外，一个是微信把你们的域名加入白名单，这种可以在Android手机的video上随意放置dom元素，IOS本身没有这个限制，另一种更为通用的方式是用微信x5内核的同层播放模式，这种模式有两种好处...title+url的组合，如果你对页面的定制化要求比较高的话，我这里有一个备选的方案，那就是放弃同层播放模式，当然这个前提是你不需要在video页面上做一些交互操作，或者说你的域名处于微信白名单下，当我们在非沉浸式下又想要打到等比例缩放视频的效果
随着这两年苹果坚定不移的走刘海屏路线，Hybrid 页面在 iPhoneX 上刘海屏的适配也是每个前端开发的小伙伴都会碰到的问题，今天就记录一下我关于刘海屏适配的部分经验。...2、H5 页面在 iOS 中占据全屏页面，在这种情况下，除了要兼顾底部小黑条，我们还要处理页面上部跟 状态栏接触的部分，避免内容出现在状态栏上。...这个函数最初由 iOS 浏览器提供，用于允许开发人员将其内容放置在视口的安全区域中，该规范中定义的 safe-area-inset-* 值用于确保内容即使在非矩形的视区中也可以完全显示。...当你的页面不使用原生导航栏铺在整个屏幕中时，这就是一个不错的适配方案。...这里要注意的是，实测时，对于 iPhone XR 我用在 stackoverflow 上找到的 media query 条件来判断不生效，后来经过查找资料，我找到一个在 iPhone XR 上实际可用的条件
项目接近尾声，测试时突然想起还有iphoneX需要适配，虽然页面都是自适应，但是由于iPhone X的特殊性，还是需要特殊对待。...因为这个h5项目嵌入在原生项目中，适配就会有有种方式：1.在原生中用原生的的方法适配 2.在前端页面中用h5的方式适配。 一.原生适配iphoneX 原生适配很简单，查看机型图： ?...适配方案** PhoneX的适配，在iOS 11中采用了viewport-fit的meta标签作为适配方案；viewport-fit的默认值是auto。...image.gif body { padding-top: constant(safe-area-inset-top); //为导航栏+状态栏的高度 88px padding-top: env(...safe-area-inset-top); //为导航栏+状态栏的高度 88px padding-left: constant(safe-area-inset-left); //如果未竖屏时为0
但是如果一个view没有在视图层次结构中或未在屏幕上显示, 则safeAreaInsets为0; 1.1 问题 视图底部工具栏显示到安全区域之外 1.2 判断安全区域距离 #define isIphoneX...(88.0):(64.0)) /*iPhoneX的状态栏高度差值*/ #define kPtatusBarHeight (CGFloat)(isIphoneX?...CGFloat statusHeight = [[UIApplication sharedApplication] statusBarFrame].size.height; NSLog(@"状态栏高度...; NSLog(@"导航栏高度：%f",navHeight); //获取tabBar的高度 //1.在tabBarController中使用（你的继承自UITabBarController的VC） CGFloat...tabBarHeight = self.tabBar.frame.size.height; NSLog(@"tabBar高度：%f",tabBarHeight); //2.在非tabBarController
这段时间相信你对要同时满足iOS7和以下的版本进行大面积的改版和特殊适配处理，尤其是状态栏的高度问题尤为棘手。...iOS11出来后尤其是iPhoneX设备推出，iPhoneX设备的特殊性表现为顶部的状态栏高度由20变为了44，底部还出现了一个34的安全区，当横屏时还需要考虑左右两边的44的缩进处理。...你需要对所有的布局代码进行重新适配和梳理以便兼容iPhoneX和其他设备，这里面还是状态栏的高度以及底部安全区的的高度尤为棘手。 个人认为这两个版本的发布是iOS开发人员遇到的需要大量布局改版的版本。...NSLayoutConstraint约束以及iOS9上的封装改进 在iOS6时代苹果推出了AutoLayout的技术解决方案，这是一套采用以相对约束来替代硬编码的解决方法，然而糟糕的方法名和使用方式导致使用成本和代码量的急剧增加...SizeClasses多屏幕适配 当我们的程序可能需要同时在横屏和竖屏下运行并且横屏和竖屏下的布局还不一致时，而且希望我们的应用在小屏幕上和大屏幕上(比如iPhone8 Plus 以及iPhoneX S
 竖屏规格：1125px × 2436px (375pt × 812pt @3x) 横屏规格：2436px × 1125px (812pt × 375pt @3x) 2、状态栏 高度增加了24像素... 来电或者热点不会导致状态栏高度变化：  3、底部栏 TabBar高度增加了34像素  UITabBar: 0x7f94ca71a7b0; frame = (0 729; 375...83); ToolBar高度不变，只是向上偏移了34像素 UIToolbar: 0x7f89c7c0b9e0; frame = (0 730; 375 48); 二、设计原则 1、所有设计的内容（不包括滚动列表...return YES; } 如果想手动控制隐藏功能，动态返回一个值，并且在更新的时候调用setNeedsUpdateOfHomeIndicatorAutoHidden。...homeIndicatorAutoHidden = NO; [self setNeedsUpdateOfHomeIndicatorAutoHidden]; 六、屏幕边缘手势冲突 有时候你的App需要控制从状态栏下拉或者底部栏上滑
目前的H5页面可以分为通栏页面和非通栏页面两种，每种页面都可能有底部操作栏，具体如下： 通栏页面 顶部通栏 某些业务的一级页面多数使用了顶部通栏banner的效果，由于iPhone X在状态栏增加了24px...解决方案：在页面底部增加一层高度34px的适配层，将操作栏上移34px，颜色可以自定义。...非通栏页面 底部Tab栏/操作栏 原因同上，在底部有34px高度的Home Indicator ，对于目前的底部Tab栏/操作栏会造成一定的阻碍操作。...解决方案：在页面底部增加一层高度34px的颜色块，将操作栏上移34px，颜色可以自定义。 关于安全区域 这里可能有人会有疑问，为什么非通栏下的页面内容是通到底部的，而按钮却是在安全区域上方呢？...这个问题涉及到安全区域，iOS11 和先前版本的不同之处在于，webview 比较重视安全区域了。这意味着，如果给页面元素设置 top: 0, 它会渲染在屏幕顶部的44px之下，也就是状态栏下面。
在iOS 13及更高版本中，可以通过删除导航栏的阴影来隐藏导航栏的底部边框（当滑动内容区域时，边框会自动重新出现）。无边框样式在大标题导航栏中效果很好，因为它增强了标题和内容之间的联系感。...隐藏状态栏下的内容。默认情况下，状态栏的背景是透明的，是可以看到背后的内容的。保持状态栏可读，并不意味着其背后的内容是可交互的。...显示全屏媒体时，请考虑暂时隐藏状态栏。...所有页面的标签栏应保持相同的高度，并且在弹出键盘时隐藏。 标签栏可能包含N个标签，但可见标签的数量因设备大小和方向而异。...通常，在iPhone上使用三到五个标签；如果需要，在iPad上可以接受更多一些。 当人们导航到您应用中的其他区域时，请不要隐藏标签栏。标签栏可为您的应用启用全局导航，因此它在任何地方都应保持可见。
作者：龙伟炜， 腾讯手机管家移动端开发 商业转载请联系腾讯WeTest获得授权，非商业转载请注明出处。...其中一个可能会有坑的点，iPhoneX的宽度与6s是一样的，但使用的是@3x图。所以在处理比例和插图时，需要注意。这就意味着，我们用的一些通过比例对其切图和布局的方法将会出现问题。...避免影响原本的各机型代码，通常这样 ： 设计师也需要注意的是，若要保持某种图片的Size比例一致，@3x图造成的变形也要进行对应比例的新切图~~ 当然，基于iOS 11推荐使用AutoLayout的设计思路...(注意使用接口需要iOS 11+系统，方法前请务必进行系统判断) SafeArea帮助我们将View设置在整个屏幕的可视化部分，即使把NavigationBar设置为透明的，系统也认为SafeArea...SafeArea可以确保可视区域不被系统的状态栏、或俯视图提供的View(如导航栏)覆盖。
作者龙伟炜， 腾讯手机管家移动端开发 商业转载请联系腾讯WeTest获得授权，非商业转载请注明出处。...见图可知，我们默认的StatusBar在iPhoneX中也有了相对的调整，对于开发和布局设计(UI标注)也需要去注意这个问题。...其中一个可能会有坑的点，iPhoneX的宽度与6s是一样的，但使用的是@3x图。所以在处理比例和插图时，需要注意。这就意味着，我们用的一些通过比例对其切图和布局的方法将会出现问题。 ?...设计师也需要注意的是，若要保持某种图片的Size比例一致，@3x图造成的变形也要进行对应比例的新切图~~ 当然，基于iOS 11推荐使用AutoLayout的设计思路，这里引入了SafeArea的概念以更好地补充完善此类适配问题...(其实这里打不打都可以，基于程序员的仪式感我才打的包) 第4步，测试同学手上有这个.app文件，输入命令安装到模拟器上 请开着iPhoneX再去跑这命令 ?
保持对齐让用户浏览更简单，并传达组织和层级关系。对齐使APP看起来整洁有序，用助于用户在滚动时集中注意力，并使查找信息变得更加容易。缩进和对齐还可以表明内容之间的关系。...请勿尝试通过在屏幕顶部和底部放置黑条来隐藏设备的圆角、传感器外壳或用于访问主屏幕的指示器。也不要使用诸如括号、边框、形状或说明文字之类的视觉装饰来引起对这些区域的特别注意。 注意状态栏的高度。...请注意，当诸如录音和位置跟踪之类的后台任务处于活动状态时，全屏iPhone上的状态栏不会更改高度。 如果你的APP当前隐藏状态栏，请重新考虑全屏iPhone的隐藏与否。...与旧款iPhone相比，全屏iPhone的内容垂直空间更大，状态栏占据了你APP可能根本无法充分利用的屏幕区域。状态栏还显示用户认为有用的信息。它只在可以换取附加价值的时候才隐藏起来。...使用原生纵横比还可以防止视频在边到边、非全屏的环境中正确显示内容，比如iPad上的画中画模式。
---- 适配新的 iPhone X 设备 此外，我们发现，对于未进行新屏幕尺寸适配的工程，直接编译，在新设备 iPhone XR 和 iPhone XS Max 上运行，它们是以放大模式自动适配的（以...但该方法存在小瑕疵，需要考虑一下两点： 当 App 支持横竖屏切换时，在横屏模式下也能够正确判断； 在模拟器中调试时，能够正确判断当前所选则的模拟器类型是不是 iPhone X； 因此，我们重新整理一下目前所了解到的几种检测设备是否为...，苹果在 iOS 11 上引入安全区域概念，建议开发者在安全区域内进行 UI 布局，因此我们可以获取屏幕 keyWindow 的 safeAreaInsets 值来判断设备是否 iPhone X。...方式五：通过 UIStatusBar 的高度判断 在 iPhone X 之前，所有 iPhone 设备的 StatusBar（状态栏）高度都为 20pt，而 iPhone X 的为 44pt，因此我们可以通过获取状态栏的高度判断是否等于...44.0 来检测设备是否为 iPhone X，代码如下： 不足：该方法只适用于竖屏且显示状态栏的情况下才能正确检测，而在横屏模式下，或者 App 隐藏导航栏时，获取到的状态栏高度都为 0（statusBarFrame
原因 iPhoneX 及以上版本手机采用了特殊的设计，包括状态栏、圆弧展示角、传感器槽、主屏幕指示器和屏幕边缘手势。...⭐️⭐️⭐️⭐️⭐️click 点击延迟与穿透问题 现象 在 iOS 设备上，单击事件可能会有 300ms 的延迟，因为 Safari 浏览器需要在单击 300ms 后判断用户是否进行了第二次点击以实现双击缩放操作...设备上，点击 input 框弹出键盘时，可能会将页面顶起来，导致页面样式错乱。...是#/home，导致初始化微信 SDK 时传入的分享 url 和用户实际触发分享操作时页面的 url 不一致，致使在 iOS 上分享失败。...解决方案 初始化微信分享 SDK 时传入的地址，和实际触发分享时页面的地址保持一致。
其中一个可能会有坑的点，iPhoneX的宽度与6s是一样的，但使用的是@3x图。所以在处理比例和插图时，需要注意。这就意味着，我们用的一些通过比例对其切图和布局的方法将会出现问题。...-10 : 0; 设计师也需要注意的是，若要保持某种图片的Size比例一致，@3x图造成的变形也要进行对应比例的新切图~~ 当然，基于iOS 11推荐使用AutoLayout的设计思路，这里引入了SafeArea...(注意使用接口需要iOS 11+系统，方法前请务必进行系统判断) SafeArea帮助我们将View设置在整个屏幕的可视化部分，即使把NavigationBar设置为透明的，系统也认为SafeArea...SafeArea可以确保可视区域不被系统的状态栏、或俯视图提供的View(如导航栏)覆盖。...在TableView上的修改姿势 四、提一下关于测试的事 由于目前还没有iPhoneX的设备，只能通过模拟器去测试，就涉及到模拟器安装ipa包的问题了。
3，控制状态栏隐藏或者改变样式。 首先注意： ios7以后，状态栏默认由控制器管理，即控制器会自动调用 preferStatusBarhidden这个方法来判断当前控制器的状态栏是否隐藏。...delegateClassName：代理方类名，遵守 UIApplicationDelegate 协议，实现协议中的方法，当第三个参数中的委托方检测到当前程序状态改变时会委托第四个参数在状态改变时执行相应的操作...// 获取状态栏高度 // returns CGRectZero if the status bar is hidden，默认高度为 20.0 CGFloat height = [UIApplication...sharedApplication].statusBarFrame.size.height; // 显示/隐藏状态栏 /* 需在 Info.plist 添加 key：View controller-based...，value：NO 在 iOS7 版本以前直接设置就可以 UIStatusBarStyleDefault = 0, Dark content, for use on light backgrounds
Windows会在显示或隐藏通知或者接受或退出密钥状态时生成通知。 您可以使用这些通知在应用程序的其他部分执行操作。...例如，如果您的应用程序支持在外部显示器上显示内容，则应在创建相应window之前等待显示器连接。 无论您的应用程序是启动到前台还是后台，您都应始终在启动时创建应用程序的主window。...但是，如果您的应用程序直接进入后台，则应避免在应用程序进入前台之前使window可见。...对于显示不透明状态栏的应用程序，请将您的view放置在状态栏下方并相应地缩小其大小。从view的高度减去状态栏的高度可以防止view的顶部被遮挡。...例如，当您显示或隐藏状态栏或显示警报视图时，系统会自动创建所需的window来显示这些项目。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
