开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

iPhone X-安全区域布局指南-我希望我的应用程序全屏显示，而不仅仅是在安全区域

iPhone X是苹果公司推出的一款智能手机，安全区域布局指南是针对iPhone X的设计准则，旨在确保应用程序在iPhone X上能够完全利用屏幕空间，并且与其他设备保持一致。

安全区域是指iPhone X的屏幕上除了刘海区（包含前置摄像头和传感器）和底部的Home Indicator（用于导航的虚拟按钮）以外的区域。由于刘海区和底部的Home Indicator会遮挡部分屏幕空间，苹果要求开发者在设计应用程序时将关键内容放置在安全区域内，以确保用户能够正常查看和操作应用。

为了实现全屏显示，开发者可以按照以下指南进行布局：

使用Safe Area Layout Guide：苹果提供了Safe Area Layout Guide，可以帮助开发者在界面布局中自动适配安全区域。开发者可以使用Auto Layout来约束视图与Safe Area的边缘，从而确保内容不会被刘海区或底部的Home Indicator遮挡。
避免遮挡刘海区：在设计界面时，应尽量避免将关键内容放置在刘海区域。刘海区域较小，容易被遮挡，为了提供更好的用户体验，应将重要的信息和功能放置在刘海区下方。
适配底部Home Indicator：底部的Home Indicator会占据一定空间，因此在设计底部导航或操作栏时，需要确保其与Home Indicator保持一定的距离，以避免遮挡。
考虑全面屏优势：iPhone X的全面屏设计为应用程序提供了更多的展示空间，开发者可以充分利用这一优势，设计更丰富、更具吸引力的用户界面，提升用户体验。

根据这些指南，开发者可以设计出适配iPhone X的应用程序，实现全屏显示并确保内容不被刘海区或底部的Home Indicator遮挡。腾讯云为开发者提供了丰富的云服务和解决方案，例如腾讯云移动应用开发套件（https://cloud.tencent.com/product/tcapp）和腾讯云移动推送（https://cloud.tencent.com/product/tpns），可帮助开发者快速构建和部署适配iPhone X的应用程序。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

iPhone X 适配指南 (官方翻译版)

4.7寸 iPhone iPhone X 对于具有自定义布局的应用，支持iPhone X也应该比较容易，特别是如果您的应用使用自动布局并遵守安全区域和边距布局指南。...在iPhone X上预览您的应用程序。您可以使用Simulator（Xcode附带）来预览应用程序，并检查剪辑和其他布局问题。一些功能，如宽彩色图像，最好在实际设备上预览。提供全屏体验。...所有应用程序都应遵循UIKit定义的安全区域和布局边距，这些区域可以根据设备和上下文进行适当的填充。安全区域还可以防止内容覆盖状态栏，导航栏，工具栏和标签栏。注意状态栏的高度。...同样，全屏iPhone X图稿在显示时被裁剪或被柱状显示全屏显示在4.7 寸iPhone上，确保重要的视觉内容保持在两种显示尺寸上。避免将交互式控件明确放置在屏幕底部和角落。...在极少数情况下，像游戏这样的沉浸式应用程序可能需要自定义的屏幕边缘手势，优先于系统的手势 - 第一个滑动会调用特定于应用的手势，而第二次滑动则会调用系统手势。

2.5K5 0

最新iOS设计规范七｜10大视觉规范（Visual Design）

（从左到右/从右到左的布局方向，日期/时间/数字格式，字体变化，文本长度）系统功能可用性（3D Touch）布局指南和安全区域布局指南中定义的矩形区域实际上在屏幕上不可见，但有助于内容的定位，对齐和间距...该系统包括预定义的布局指南，可轻松在内容周围应用标准边距并限制文本的宽度，以实现最佳的可读性。您还可以定义自定义布局指南。 ? ? 遵守UIKit定义的安全区域和布局边距。...这些布局指南可确保根据设备和上下文进行适当的插入。安全区域还可以防止内容重叠在状态栏，导航栏，工具栏和选项卡栏上。系统提供的标准视图将自动采用安全区域布局指南。...为了获得最佳结果，请使用系统提供的标准界面元素和“自动布局”来构建您的界面，并遵守布局指南和安全区域定义。...与旧款iPhone相比，全屏iPhone的内容垂直空间更大，状态栏占据了你APP可能根本无法充分利用的屏幕区域。状态栏还显示用户认为有用的信息。它只在可以换取附加价值的时候才隐藏起来。

8.1K3 0

【最新】iPhone X 交互设计官方指南

如果你的的应用程序具有自定义布局，那么支持 iPhone X 也应该比较容易。如果你的应用程序使用 Auto Layout 并且遵守安全区域和边距布局指南的话。...所有的应用程序都应遵循 UIKit 中定义的安全区域和布局边距，这些区域可以根据设备和上下文进行适当的填充。安全区域还能够防止内容把状态栏、导航栏、工具栏和标签栏覆盖掉。注意状态栏的高度。...iPhone 上的显示高度为 4.7 英寸，并且它的屏幕上提供了更多的垂直空间内容，状态栏占据了你的应用程序本来可以使用的屏幕区域，状态栏还显示了对人们有用的信息，只有在交换附加值时候才能被隐藏。...同样的道理，iPhone X 上的图稿在全屏显示时会被裁剪或者添加黑边。如果要继续使用在 4.7 英寸 iPhone 上全屏显示的图稿，一定要注意在两种显示尺寸上的兼容性问题。...避免将交互式控件放置在屏幕最底部和角落里。人们可以使用显示屏底部的滑动手势来访问主屏幕和对应用程序进行切换，这些手势可能会覆盖掉你在此区域中设定的自定义手势。另外屏幕的两个角落令人很难进行有效操作。

1.9K2 0

iPhone X的UI设计技巧

作为一名UI设计师，我总结了一些在设计iPhone X App时有效的技巧供大家参考： 1. ...因此，您最好将背景扩展到显示屏的边缘(包括状态栏)，以及垂直可滚动的区域。...以下是苹果为设计师定义安全区域的方式。（如下图示） ? 如果您的App应用平台标准组件和自动布局，您的用户界面也应适当地缩放以适应iPhone X屏幕。 ? PS:只能隐藏状态栏以换取附加值。...提供全屏体验与大多数宽高比不匹配一样，适用于旧款iPhone屏幕的设计要么被裁剪，要么被添加白边。...在iPhone X的内容被显示在一个小于4.5英寸设备上的情况下，该设计甚至可以把多余的屏幕留白（图中两边垂直的白边）收起来。为了交付这样的好图像，为不同的长宽比创建独立的屏幕适配也是值得的。 ?

1.2K4 0

七个用户体验设计小秘诀，打造最舒服的互动流程

与标签栏一样，所有选项都可以立即显示，只需点击一下即可访问。 ? 全屏导航这可能听起来与我所说的节省屏幕空间相矛盾，但全屏导航或许是一个不错的选择。...（研究：Steven Hoober）据史蒂文·霍伯（Steven Hoober）的研究，85％的用户用一只手使用手机。以下热图显示了自2007年以来每个iPhone显示屏尺寸的拇指区域。...确保你的应用程序可以轻松地（完全）在一个大屏幕（如iPhone 6或7）上使用。共同操作和导航的绿色区域将顶级菜单，常用的控件和常用操作项目放在屏幕的绿色区域中，用一个拇指就可以轻松地达到。 ?...（图片：Dmitry Kovalenko）破坏操作的红区由于你不希望用户不小心点击这些操作，请在难以达到的红色区域中放置破坏性的操作（例如删除和清除）。 ?...而不是显示一个加载指示器，使用屏幕架构来专注于实际进度，并创造对将来的预期。这意味着事情正在发生，随着信息逐渐显示在屏幕上，人们看到应用程序在等待时正在进行中。

2.4K6 0

iPhoneX 适配实践

一、屏幕尺寸 1、规格： iPhone X 的屏幕宽度同 iPhone 6、iPhone 6s、iPhone 7 和 iPhone 8 的 4.7 英寸屏幕宽度相同，即 375pt。...上图为官方标准的黑色背景，注意不是纯黑色的，还能分辨传感器区域三、SafeArea安全区域安全区域是指在屏幕顶部和底部区域之间能正常显示内容的区域。...1、iPhoneX安全区域(全屏状态): 2、普通iPhone安全区域（包含所有状态）： 3、安全区域布局SafeAreaLayoutGuide /* The top of the safeAreaLayoutGuide...四、布局适配 1、自定义导航栏如果你的项目存在导航栏界面push到全屏界面，或者手势滑动做很炫的过场动画，那么你可能会用到自定义导航栏NavigationBar，每个ViewController维护自身的...: safeAreaInsets:{88, 0, 34, 0} 2、自定义工具栏可交互的固定组件是不能遮住home键指示器，需要放置在安全区域底部内。

3.8K4 1

SwiftUI 中的内容边距

前言SwiftUI 引入了一组视图修饰符，使我们能够有效地管理视图中的安全区域。在许多情况下，安全区域是你希望放置内容的地方。...在使用 UIKit 时，我们可以访问 readableContentGuide 布局指南。从字面上看，它是另一个安全区域，适应屏幕大小，但仅适用于文本内容。...使用 contentMargins我们需要一种区分视图的内容和工具栏，并仅移动内容而保持工具栏在原地的方法。...你可以在 Playground 中运行此代码以查看结果。总结本文介绍了 SwiftUI 中的内容边距管理，通过对比安全区域的概念，解释了内容边距的重要性。...随后，通过介绍 UIKit 中的 readableContentGuide 布局指南以及 SwiftUI 中的 safeAreaPadding 视图修饰符，展示了在 iPad 上适配内容边距的方法。

1763 2

【HTML5 理论知识】就H5调试技巧，浅谈：iPhone X 适配方案！

image.png 2017年9月苹果发布了iPhone X机型，对于它的“刘海儿”和底部Home Indicator。我们可以通过以下三种方案进行适配~下面就让我来逐一介绍吧！...客户端适配解决方案客户端直接将webview的安全区域限制在除去安全区域的区域内。页面将展示在下图灰色webview内： image.png 利弊分析优点：H5前端开发没有任何适配工作量。...)和env(safe-area-inset-X) ，这些属性是与iOS11以上的所有iPhone机型（不仅仅包括iPhone X）都相关的，故以iOS版本为区别具体分析一下全屏下的H5页面： 1....针对于iOS11.0-iOS11.1的系统：当设置了viewport-fit=cover，H5页面会覆盖页面安全区域全屏展示，但是这样会带来页面元素会被“刘海儿”和底部Home Indicator遮挡问题...机型上，H5加入viewport-fit=cover后，safeArea的值是基于“如果布局接触了非安全区域才会赋值”。

3.3K8 0

iPhone 检测 iPhone X 设备的几种方式和分辨率终极指南

大家好，又见面了，我是你们的朋友全栈君。...方式三：通过底部安全区域的高度来判断方式四：通过是否支持 FaceID 判断方式五：通过 UIStatusBar 的高度判断结语原文链接参考连接 ---- 本文是我们前两天发的两条小集的汇总...后面我们想了一个简便的方法，即获取屏幕的宽度和高度，取较大一方进行比较是等于 812.0 或 896.0，代码如下：方式三：通过底部安全区域的高度来判断在去年 iPhone X 发布后，为了适配顶部的浏览和底部的操作条...，苹果在 iOS 11 上引入安全区域概念，建议开发者在安全区域内进行 UI 布局，因此我们可以获取屏幕 keyWindow 的 safeAreaInsets 值来判断设备是否 iPhone X。...方式五：通过 UIStatusBar 的高度判断在 iPhone X 之前，所有 iPhone 设备的 StatusBar（状态栏）高度都为 20pt，而 iPhone X 的为 44pt，因此我们可以通过获取状态栏的高度判断是否等于

1.4K2 0

Web App 一分钟适配 iPhone X

因为 iPhone X 的刘海设计，Web 在 iPhone X 横屏时，可能会有这些问题：默认情况，iPhone X 会将页面填充到安全区域(safe area)，就像上面的图一样，一般情况下是没有问题的...；但如果是全屏 Web App 就会有问题了，比如背景色和页面的契合程度之类的；有的 iOS app 内置 WKwebview 可能会为了避免一些bug，而采用统一的行为，就是禁用 iOS 11 自己的内容区域判断...默认全屏 ? 在 viewport 的 meta 属性中，添加 viewport-fit=cover 即可。...设置页面边距为安全区域边距 ?...当然，这里的padding只是用于匹配iPhone X默认的安全区域的，你可以设置任何值，不过建议要不小于默认的安全区域值。当前版本，横屏时，各属性的值： ? ?

7252 0

极速适配 iPhone X 秘笈

在适配过程中，我们尝试了这三种方案，如下。解决方案1 客户端适配客户端直接将 webview 的安全区域限制在除去安全区域的区域内。...缺点：页面会限制在客户端限制的 webview 区域内，没有满屏效果。...缺点：对于全屏 / 透顶标题栏 / 横屏情况都要用不同的 css 代码进行适配，不够灵活。另外，如果苹果下一年又发布了类似 iPhone X plus 这样的机型，适配工作就要重新来过。...针对 iOS 11.0 - iOS 11.1 的系统：当设置了 viewport-fit=cover，H5 页面会覆盖页面安全区域全屏展示，但是这样会带来页面元素被“刘海儿”和底部 Home Indicator...iOS 11 机型上，H5 加入 viewport-fit=cover 后，safeArea 的值是基于“如果布局接触了非安全区域才会赋值”。

1.3K4 0

Android 9.0系统新特性，对刘海屏设备进行适配

这种属性允许应用程序的内容在竖屏模式下自动延伸到刘海区域，而在横屏模式下则不会延伸到刘海区域。...可以看到，在竖屏模式下应用程序的状态栏部分刚好占据了手机的刘海区域，并且系统还会根据刘海的高度来自动调整状态栏的高度，这样应用程序中的内容自然是不会被刘海部分遮挡到的。...可以看到，程序进入了全屏沉浸式体验的效果，并且我们在布局文件中设置的背景图是可以延伸到刘海区域的，这就使得手机屏幕的空间得到了更充分的利用。现在旋转一下手机屏幕，效果如下图所示： ?...很明显，这比之前在刘海区域空出一条大黑边的用户体验要好上太多了。不过，虽然现在我们已经实现了让应用程序的内容延伸到刘海区域的功能，却无法保证刘海部分不会影响到应用程序的正常使用。什么意思呢？...Android在9.0系统中提供了一套专门用于获取安全显示区域的API，我们只需要确认出哪些位置是有可能被遮挡到的，然后对可交互控件进行相应的位置偏移就可以了，示例代码如下所示： if (Build.VERSION.SDK_INT

8591 0

手机QQ空间iPhone X适配总结

而全屏化主要修改的是启动页，如果启动页使用storyboard或者xib文件，那么全屏化无需添加任何操作，同时也推荐使用该方式，但是如果之前使用的images.xassets放置启动页，那么需要把原来的...状态栏到底还要不要隐藏在完成全屏化后我们得到的界面如下图所示。 [image.png] 由上图可知，状态栏展示内容其实非常少，而且不完整。...，当我们在全屏界面隐藏了状态栏之后，statusBarFrame获取到的size为0，可能会出现控件布局错乱，因此最稳妥的方法还是判断是否iPhone X返回一个常数，如下所示。...toolbar的显示现在适配比较纠结，那就是到底要不要修改toolbar的高度，如下面输入面板中表情滑动条的高度，根据内部适配规范我们只是把它往上提而不修改其高度，但这看上去悬空的感觉可能会有点奇怪。...需要注意的坑关于TabBar高度，在VC的viewWillAppear中获取到的是默认原始高度49，而到了viewDidAppear时获取到的高度为83，这就导致了在popVC时可能底部tabbar发生一个从下到上的跳动

1.8K3 0

让你的WEB和APP一分钟适配 iPhone X

iPhone X昨日已经开抢了然而面对 iPhone X 这个奇葩的屏幕你和你的编辑器准备好了吗？...因为 iPhone X 的刘海设计，Web 在 iPhone X横屏时，可能会有些问题：默认情况，iPhone X 会将页面填充到安全区域(safe area)，就像上面的图一样，一般情况下是没有问题的...；但如果是全屏 Web App 就会有问题了，比如背景色和页面的契合程度之类的；有的 iOS app 内置 WKwebview 可能会为了避免一些bug，而采用统一的行为，就是禁用 iOS 11 自己的内容区域判断...在 viewport 的 meta 属性中，添加 viewport-fit=cover 即可。...当然，这里的padding只是用于匹配iPhone X默认的安全区域的，你可以设置任何值，不过建议要不小于默认的安全区域值。

1.3K8 0

Android P 凹口屏支持，打造全面屏体验

默认情况下，如果开发者在竖屏模式下未对状态栏设定任何特殊标志位，状态栏会根据屏幕缺口情况自行调整高度 (缺口高度 ≤ 状态栏高度)，而应用内容则会显示在状态栏以下区域；在横屏和全屏模式下，系统会在应用窗口四周保留黑边...△ 应用请求在缺口区域进行布局开发者可以调用 Android P 中的相关 API，判断设备是否具有凹口屏，然后在获取缺口的位置信息，并管理内容在缺口区域的布局。...您可以利用全新的窗口布局属性 layoutInDisplayCutoutMode 管理应用在凹口屏幕上的布局显示。...如果您希望利用到整个显示区域，而且不介意缺口位置无法显示应用内容，SHORT_EDGES 模式是个不错的选择，在该模式下，系统始终允许应用窗口延伸至缺口区域。...8.1 (API 27) 的设备上，您也可以在缺口区域对应用内容进行布局。

1.5K2 0

H5 页面 iPhoneX 刘海屏适配

但是为了比较，我这里给出一张苹果官方文档中，iPhone8之前的常规屏幕和刘海屏 Safe Area 区域的对比图。 ?...2、H5 页面在 iOS 中占据全屏页面，在这种情况下，除了要兼顾底部小黑条，我们还要处理页面上部跟状态栏接触的部分，避免内容出现在状态栏上。...这个函数最初由 iOS 浏览器提供，用于允许开发人员将其内容放置在视口的安全区域中，该规范中定义的 safe-area-inset-* 值用于确保内容即使在非矩形的视区中也可以完全显示。...完美的显示在了 Safe Area 的区域中。...这里要注意的是，实测时，对于 iPhone XR 我用在 stackoverflow 上找到的 media query 条件来判断不生效，后来经过查找资料，我找到一个在 iPhone XR 上实际可用的条件

4.4K4 0

iPhone关机仍可被攻击引热议，苹果安卓用户一整个无语住了

据了解，它们并没有配备数字签名机制（一种安全机制），甚至没有对运行的固件进行加密。于是乎，这也就成了研究人员的突破口：首次在低功耗模式（LPM）下，研究iPhone无线芯片存在的安全隐患。...设计了一款恶意软件，在iPhone关机状态下仍可以运行。这项研究将发表在国际无线安全研究领域顶会ACM WiSec。...而也正因LPM是在硬件中实现，所以顾名思义，我们无法通过更改软件组件的方式来删除它。 “这便构成了一种新的威胁”，研究人员表示。...具体而言，这项研究逆向工程了多个无线daemon和固件组件，来分析了攻击关机iPhone的可能性。（daemon是一段连续运行的程序，用于处理计算机系统希望接收到的阶段性的服务需求。）...例如在使用Find My等功能时，防止固件篡改是iPhone一个重要的安全屏障。像iOS 可以使用供应商特定的HCI命令写到可执行RAM区域。

2641 0

折叠屏上应用设计规范，了解一下？

△ 布局的三个主要区域指南中的组合部分带您了解如何充分利用屏幕空间以保障可读性，并且以尊重用户心智模型的方式在不同的场景下合理排布重要内容和操作选项。...△ 组合指南中涉及的部分布局方式以 Fortnightly 示例应用为例，它在平板电脑上的界面布局十分均衡，这得益于它遵从了指南里对容器的建议。...△ 使用栏式网格将屏幕划分为三个主要区域在本例中，三个主要区域通过重排来保持相同的信息层次结构，但以更加人性化的方式在小屏幕上显示。...然后，在 Started 和 Stopped 这两种生命周期状态之间，我们可以安全地从窗口布局信息流中收集信息。...我们希望大家都能够利用今天分享的内容，并参考新的质量指南，构建出在各种屏幕尺寸下都能让用户心动的应用。

4.5K2 0

20180914_ARTS_week12

Tip 分享个关于移动端网页适配 iPhone X 的相关内容。 iPhone X 新增了一个叫安全区域的概念，也就是除了四周圆角，上边刘海，底部小黑条之外中间的那个长方形区域。...我们对网页做适配主要也是让主体内容保持在安全区域内。...苹果为了适配 iPhone X 对现有 viewport meta 标签扩展了一个叫 viewport-fit 的东东，用于设置网页在可视窗口的布局方式，可设置三个值： contain: 可视窗口完全包含网页内容...：安全区域距离右边边界距离 safe-area-inset-top：安全区域距离顶部边界距离 safe-area-inset-bottom：安全区域距离底部边界距离然后就可以通过利用这些变量来达到将页面控制在安全区的目的...其实我觉得这个方案不是特别好，对于已有的项目，比如 hybrid app，页面数量何止成百上千，一个一个根据页面情况做适配简直是会疯掉，更好的方案是终端开发能定制 webview，提供能力，在 iPhone

3521 0

WEBAPP开发技巧总结

自Iphone和Android这两个牛逼的手机操作系统发布以来，在互联网界从此就多了一个新的名词-WebApp(意为基于WEB形式的应用程序，运行在高端的移动终端设备)。...1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；第二个meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；第三个meta标签也是iphone...HTML5，而放弃HTML4，因为HTML5可以实现一些HTML4中无法实现的丰富的WEB应用程序的体验，可以减少开发者很多的工作量，当然了你决定使用HTML5前，一定要对此非常熟悉，要知道HTML5...因为在触控手机上，为提升用户体验，尽可能的保证用户的可点击区域较大。 6、自适应布局模式在编写CSS时，我不建议前端工程师把容器（不管是外层容器还是内层）的宽度定死。...为达到适配各种手持设备，我建议前端工程师使用自适应布局模式（支付宝采用了自适应布局模式），因为这样做可以让你的页面在ipad、itouch、ipod、iphone、android、web safarik

2K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭