文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么iPhone X InputViewController高度相当于系统键盘大小的一半？

iPhone X的InputViewController高度相当于系统键盘大小的一半是因为iPhone X采用了全面屏设计，屏幕顶部有一个刘海区域，其中包含了前置摄像头、传感器等组件。为了适应这种设计，苹果在iPhone X上对键盘进行了优化，将InputViewController的高度设置为系统键盘大小的一半。

这样做的目的是为了提供更好的用户体验。由于刘海区域的存在，如果InputViewController的高度与系统键盘一样高，那么键盘会挡住屏幕顶部的一部分内容，影响用户的操作和观看体验。通过将InputViewController的高度设置为系统键盘大小的一半，可以让用户在输入时能够看到更多的内容，同时也不会影响键盘的正常使用。

对于开发者来说，需要注意适配iPhone X的全面屏设计。在开发过程中，可以通过Auto Layout和Safe Area来适配不同屏幕尺寸和刘海区域。同时，也可以使用苹果提供的一些API来获取屏幕的实际可用区域，以便在布局和交互中进行相应的调整。

腾讯云相关产品和产品介绍链接地址：

相关搜索:腾讯云10元一月拼团腾讯云10元校园计划腾讯云10块钱服务器腾讯云10学生机续费腾讯云1000qps腾讯云1001无标题腾讯云11月9日故障腾讯云1g1核怎么样腾讯云1mbps带宽腾讯云2000代金券
相关搜索:
页面内容是否对你有帮助？
有帮助
没帮助

相关·内容

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

请参阅图像大小和分辨率和自定义图标。 布局 在设计iPhone X时，您必须确保布局填满屏幕，并且不会被设备的圆角，传感器外壳或用于访问主屏幕的指示灯遮蔽。...状态栏在iPhone X上比在其他iPhone上更高。如果您的应用假定固定状态栏的高度用于将内容定位在状态栏的下方，则必须更新您的应用，才能根据用户的设备动态定位内容。...请注意，当背景任务（如录音和位置跟踪）处于活动状态时，iPhone X上的状态栏不会改变高度。 如果您的应用程序目前隐藏状态栏，请重新考虑iPhone X上的决定。...不要重复系统提供的键盘功能。在iPhone X上，即使使用自定义键盘，Emoji / Globe按钮和Dictation按钮也自动显示在键盘的下方。...您的应用程序不能影响这些按钮，因此避免在键盘中重复这些按钮造成混乱。请参阅自定义键盘。 资源 下载Photoshop和Sketch 资源中的 iPhone X UI设计模板。 原文链接

2.5K50

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

但是，iPhone X 的屏幕比 4.7 英寸屏幕高 145pt，这样一来就多了大约 20％的垂直高度。 ?...请参阅 图像大小和分辨率 和 自定义图标。 布局 在对 iPhone X 中的应用进行设计时，你必须确保布局能够填满屏幕，并且保证他们不会被设备的圆角、传感器外壳或者用于访问主屏幕的指示灯遮盖。 ?...iPhone X 上的状态栏比其他 iPhone 上的更高。如果你的应用程序的状态栏高度比默认状态栏高，那么你必须更新自己的应用程序，这样才能动态的根据用户设备定位内容。...但是请注意，当背景任务（例如录音和位置跟踪）处于活动状态时，iPhoneX 上的状态栏并不会改变高度。 如果你的应用程序对隐藏状态栏进行了隐藏，那么请重新考虑在 iPhone X 上的设计。...同样请确保你的应用程序在支持 Touch ID 的设备上没有引用 Face ID功能。 请参阅 验证。 在使用自定义键盘时，不要重复实现系统提供的键盘功能。

1.9K20

    • 揭秘移动端px,dpi,dpr

    前言 移动端开发的时候，我们拿到的 UI设计稿 通常都是 640px 或者是 750px ,明明我们的 设备视口宽度 是设计稿的 一半 ,这是为什么呢？...比如，我们说iPhone6屏幕分辨率是750x1334px 对于图像，概念等同于图像尺寸、图像大小、像素尺寸 等等。...比如iPhone5使用的是Retina视网膜屏幕，用2x2的Device Pixel代表1x1的CSS Pixel，所以设备像素数为640x1136px，而CSS逻辑像素数为320x568px 所以，1...获取屏幕的DPR 为什么iPhone6为标准的设计稿是750px，而不是375px ?...那么一开始就用 750px ，切下来的图是不是可以直接适配Retina屏（这也解释了为什么视觉稿的画布大小要×2），当然了 375px 也行,不过此时我们处理375px设计稿的时候，认为这个单位是逻辑像素

    2.1K10

    flutter 屏幕尺寸适配和字体大小适配的实现

    安卓原生的话有自己的适配规则，可以根据不同的尺寸建立不同的文件夹，系统会根据当前的设备尺寸取对应的大小的布局。...，根据系统的“字体大小”辅助选项来进行缩放 ScreenUtil().setSp(28，false) //传入字体大小，不会根据系统的“字体大小”辅助选项来进行缩放 for example:...Text('我的文字大小在设计稿上是14px，会随着系统的文字缩放比例变化', style: TextStyle( color: Colors.black, fontSize: ScreenUtil()...假设,我们的设计稿手机是10801920 px. 设计稿上有一个540960 的组件, 即宽度和宽度是手机的一半....如果我们直接写的时候组件的尺寸这么定义,在其他尺寸的设备上未必是一半,或多,或少. 但是我们可以按比例来看,即我们要实现的宽度是实际设备的一半.

    5.5K31

    IOS开发之尺寸

    苹果为方便开发者用的是@3x的素材，然后再缩放到@2.46x上。     参考：《为什么iPhone 6 Plus要将3x渲染的2208x1242分辨率缩小到1080p屏幕上？》...同时该API根据UIScreen的scale，自动查找包含对应高倍图后缀名（@2x）的文件，如果找到二倍图，则image.scale=2.0，对应逻辑size大小以point度量（pixel度量的一半）...在实际运行时，系统如果发现当前设备是Retina屏（scale=2），会自动寻找"*@2x.png"命名格式的图片，加载针对Retina屏的图片素材，否则会失真。...对象没有使用系统缓存，并且指定文件名必须包含明确的高倍图后缀。...（2）按高度适配 在同样的宽度下，iPhone4(s)的屏高比iPhone5(s)低，若纵向排版紧张，可以iPhone5(s)为基准，按高度适配：         fitScreenHeight= height

    3K40

    安卓ios兼容问题及处理（小程序H5）

    有个属性 var layoutMargins: UIEdgeInsets ， 如果一个View是ViewController的rootview，系统会自动设置和管理margins ， top和bottom...解决办法： 给input设置lineline-height来让输入内容居中或者上下偏移是不可取的，推荐使用padding撑开高度 input{ padding:30rpx; &::placeholder...安卓/IOS图片卡顿异形 问题 ：安卓上图片会出现卡顿，变形，然后才会显示正常的图片大小 原因： image组件默认宽度300px、高度225px 解决办法： 使用image 标签，尽量固定宽高。...键盘弹出异常 问题： ios上键盘弹出会将页面往上顶 安卓显示正常 原因： ios上的软键盘会使页面的fixed定位失效。...解决办法： 可以监听resize事件（浏览器窗口大小调整时触发），当键盘弹出的时候，更改页面的position属性值。

    7.8K71

    移动端常用适配方案四

    initial-scale 属性来缩小，注意点: 缩放视口后视口大小会发生变化，利用获取像素比动态设置缩放比例改造之前的示例如下：<!...补充在上方我们是如何进行缩小的是不是通过将整个视口大小进行缩小的，但是在视口缩小之后我们里面的内容并没有随之而然的进行缩小，这个原因其实也很简单，在如下代码我设置了视口的宽度等于设备的宽度，然后在获取了一下视口的宽度...，原因就是因为它在进行缩小的时候首先会将视口变大一半，原本我设置的宽度等于设备的宽度应该长相如下这么宽：图片但是它发现你要缩小，它会先进行扩大一半，本来如果一样的话两个都是 320 480，那么这个时候呢它发现你要缩小它会先进行扩大一半...，扩大一半之后就变为了 640 960 那么这个时候你就会发现已经与视口的宽度是一个一一对应的关系了，然后在一一对应关系的视口当中先进行布局，布局完毕之后在放入真正视口当中，然后在进行缩小一半，然后正是因为它们是一一对应的关系所以说你看到的界面就没有变小了...：图片图片我正在参与2023腾讯技术创作特训营第二期有奖征文，瓜分万元奖池和键盘手表

    25500

    16款值得一用的iPhone线框图模板 (PSD & Sketch）

    模板中标注了顶部导航栏、底部导航栏以及键盘高度的位置。无论是打印或复制粘贴到原型工具中使用都非常方便。可以说设计师非常贴心了。...这是一款专门为iPhone 7 准备的线框图模板，设计师同样标注了顶部导航栏、底部导航栏以及键盘高度的位置，可以直接打印出来做手绘原型或线框图设计。...下载地址 2. iPhone 7 wireframe 设计师：Oleg Sukhorukov 格式：PDF、PSD 价格：免费 摹客设计系统上线了！三大福利送不停！ 领取福利 ?...同样是一款iPhone 7的打印版线框图。在封面图中可以看到打印版线框图的正确用法。根据设计师制作的导航栏以及键盘的高度标记，使用者不必再花心思和时间测量项目高度以及各组件高度在线框图中应占的比例。...这款iPhone X 线框模板在Sketchappsources达到了7K+的下载量。足以见得目前iPhone X的受欢迎程度以及iPhone X应用的巨大市场潜力。

    2K20

    移动端开发的几点建议

    例如 iphone 6，它的分辨率是 750 x 1334，真实开发尺寸是 375 x 667（逻辑像素），打开 chrome 控制台，切换 device toolbar， 选择 iphone 6 设备就能看到...PS：在页面上有 input 输入框的时候，不要使用 vh 作为计量单位，因为软键盘弹出时会压缩页面高度，如果用 vh 作为计量单位，会导致页面严重变形，此时用 vw 就没有这个风险了。...固定高度使用 px 像边框或者分隔线等“固定”高度的，可以使用 px。 兼容多端建议使用 px 如果你的网站要兼容多端，例如手机、pad、甚至 pc。...PS：如果一个 app 要应用在手机和平板上，相对计量单位建议使用 rem，这样在手机和平板上可以设置两个不同的根元素字体大小。 推荐阅读 rem 栅格化系统的原理以及实现 4....设备状态栏 如果 app 在移动设备上不需要全屏展示，那么在 chrome 上模拟设备大小时要减去设备状态栏的高度。 当然，这一般都不会有什么问题，只是为了多加一条建议。

    97720

    iPhone屏幕尺寸、分辨率及适配

    中，同样大小（3.5 inch）的屏幕采用了Retina显示技术，横、纵向方向像素密度都被放大到2倍，像素分辨率提高到(320×2)x(480×2)= 960×640（PPI=326）， 显像分辨率提升至...苹果为方便开发者用的是@3x的素材，然后再缩放到@2.46x上。 参考：《为什么iPhone 6 Plus要将3x渲染的2208×1242分辨率缩小到1080p屏幕上？》...同时该API根据UIScreen的scale，自动查找包含对应高倍图后缀名（@2x）的文件，如果找到二倍图，则image.scale=2.0，对应逻辑size大小以point度量（pixel度量的一半）...在实际运行时，系统如果发现当前设备是Retina屏（scale=2），会自动寻找”*@2x.png”命名格式的图片，加载针对Retina屏的图片素材，否则会失真。...（2）按高度适配 在同样的宽度下，iPhone4(s)的屏高比iPhone5(s)低，若纵向排版紧张，可以iPhone5(s)为基准，按高度适配： fitScreenHeight= height

    5.9K20

    【移动端bug】iOS 下 Input 和 fixed 的问题

    2、 证明是否页面已经滚到底部时，唤起键盘，定位元素实际DOM被顶上去 获取了正常显示时 和 聚焦时的 输入框距离浏览器顶部的高度，如下图 ? 两者高度不一样了！！...4为什么会这样 究其原因，其实是 iOS 系统的bug，后续的系统已经修复了 5解决方法 虽然是系统bug，但是我们要照顾这部分人群，总不能让人换手机，只能自己解决了 先想想，当页面滚动到底部时，激活定位元素的输入框...= str.match(/cpu iphone os (.*?)...，唤起键盘，定位元素的 实际DOM 就是正常的 3证明一下猜想 1 、证明聚焦再失焦，定位元素的实际dom是否跟显示元素错位了 我对比了 新打开的定位元素输入框距顶高度 和 聚焦又失焦操作后的 定位元素输入框距顶高度...4为什么会这样 你仔细观察，在输入框被激活，唤起键盘时，页面的内容会被往上顶，从而往上滚动一些 ?

    4.6K61

    移动端必备的H5问题及解决方案

    移动端 H5 相关问题汇总： 响应式布局 iOS 滑动不流畅 iOS 上拉边界下拉出现白色空白 页面件放大或缩小不确定性行为 click 点击穿透与延迟 软键盘弹出将页面顶起来、收起未回落问题 iPhone...原理与解决方案 软键盘将页面顶起来的解决方案，主要是通过监听页面高度变化，强制恢复成弹出前的高度。..., y-coord)，其中window.scrollTo(0, clientHeight)恢复成原来的视口 六、iPhone X系列安全区域适配问题 表现 头部刘海两侧区域或者底部区域，出现刘海遮挡文字...产生原因 iPhone X 以及它以上的系列，都采用刘海屏设计和全面屏手势。头部、底部、侧边都需要做特殊处理。才能适配 iPhone X 的特殊情况。...判断设备是否属于 iPhone X，给头部底部增加适配层 viewport-fit 有 3 个值分别为： auto：此值不影响初始布局视图端口，并且整个web页面都是可查看的。

    4.6K42

    JavaScript笔记(17)

    事件委托的作用 我们只操作了一次DOM,提高了程序的性能 那我们可以这么做,给ul加上点击事件: 但是我们可以看到点击li的时候也会弹出警示框,这是为什么呢?....现阶段我们主要是用鼠标事件对象MouseEvent和键盘事件对象KeyboardEvent clientX / clientY 我们获取一下在可视区中的点击坐标:(如果页面滚动也不会影响) 但是如果整个页面有有滚动条...,我们想要获取点击的位置距离最顶端的坐标呢?...如果想要居中那就x-盒子宽度的一半,y减去盒子高度的一半 常用的键盘事件 keyup和keydown是不区分大小写的,keypress区分大小写 如果同时写了onkeydown和press,会先执行...: 案例:模拟京东快递查询 我们在输入单号的时候上面会出现一个大的框框,里面的数字字号更加大些,先自己试着做做 千万要注意用的是keyup而不是keydown,因为我们按下键盘时,就已经触发事件

    80810

    iPhone 13发布会，苹果不想让你知道的三个细节

    原因在于，这届iPhone 13阉割得属实有些厉害，使得Pro版本必须进入购买备选项了：iPhone 13和iPhone 13 Pro/Max的差距，甚至要大于当年iPhone 8系列和iPhone X...回到iPhone 13系列，可以肯定的是，此次苹果在显示屏和处理器上的阉割，使得购买iPhone基础数字系列，花费大概一半的价格体验iPhone完整功能80%的时代，彻底过去了，iPhone同代旗舰机型...为什么要对比上代呢，苹果的理由看似很合理：新一代的iPad Air与上一代进行对比，理所应当。...为了能够理解运行内存和储存容量的关系，此处举一个相对容易理解的例子： 把手机类比为一个人在办公桌上工作，处理工作的人就相当于处理器；运行内存容量相当于桌面，桌子的面积越大，能够同时处理的工作就越多；储存容量则相当于桌子下的储物柜...而此时，你已经掉入苹果的圈套，根据多家机构的统计，iPhone用户的忠诚率在50%以上，意味着一半以上的用户会继续选择购买iPhone，为苹果帝国添砖增瓦。

    62850

    IOS学习——iphone X的适配

    首先，啥都不管，先在iPhone X上运行起来看看效果在说，运行之后出现的问题主要有如下几个： 屏幕尺寸还是6S上的尺寸大小，用  打印log确实如此 [[UIScreen mainScreen] bounds...屏幕尺寸还是6S上的尺寸大小，用打印log确实如此 [[UIScreen mainScreen] bounds] 　　这个的主要问题就在于没有适配iPhone X的启动页，如果你的项目中没有自定义的启动页则无所谓...By the way，启动页的图的大小一般是按照iPhone X的大小来切，具体尺寸在上面提到的官网有说到，就是：1125px × 2436px (375pt × 812pt @3x)，如果还有导航页、...因为在这里项目中并没有对搜索栏进行自定义或者修改参数，但是iPhone X的自带系统软件中搜索点击之后很正常，所以猜测很可能是默认布局的一些参数被修改了。...某些控件的相对位置不对 　　这个的主要问题就是跟iPhone X的屏幕特性有关，之前都是用纯代码用相对布局进行画的图，iPhone X的屏幕高度增加之后，再加上iPhone X的刘海特性和底部圆角的特点

    1.5K60

    iOS开发笔记（八）---- 键盘、静态库、动画、Crash定位

    前言 分享开发中遇到的问题，和相关的一些思考。 iOS11键盘问题 功能背景： 弹出键盘时，如果有输入框的话，需要输入框的位置跟随键盘大小而变动。...iPhone 7 Plus，iOS 11.1.2，简书 相关实现： 输入框监听系统的UIKeyboardWillShowNotification和UIKeyboardWillHideNotification...添加Log进行调试，得到以下结果： /* 226是系统英文键盘的高度； 292是搜狗输入法键盘的高度； 271是emoji键盘的高度； */ UIKeyboardWillShowNotification...292高度的搜狗键盘切换成271的emoji键盘的时候，有时会无法触发回调，造成实际上键盘高度产生292-271的误差（21pt）。...附： iOS 11还有另外的键盘表现异常：在APP中呼起键盘，把APP切入后台，在系统桌面下滑呼起系统搜索的键盘，会导致APP内的键盘收起。

    1.2K90

    CSS 你到底有多少长度单位？

    rem 总是以根节点 (html) 的字体大小作为参考，你看命名 rem 就是 root em，而 em 则以当前元素的字体大小作为参考。...这样达到的效果就是不同设备分辨率下界面上内容是完全等比缩放的。 另外同样以相对字体大小的单位还有 ex 、ch，虽然它们两位一般不被使用 .. 1ex 表示一个小写字母 x 的高度。...但它的表现不像 em 那样稳定， 比如在 IE 下 ex 正好是 em 的一半，在火狐下更接近字体的实际高度，所以我们一半认为 ex ≈ em / 2 。...px 了，它究竟为什么如此好用？...等比伸缩布局不是万能的，让 ipad 和 iphone 显示完全一样的等比放大的内容本身就是偷懒的方案，如何设计好自适应和响应式的结合是产品线从设计开始就得考虑的内容。

    44820

    你不应该依赖CSS 100vh，这就是原因!

    要看到这个问题，你需要在真实的手机或模拟器上查看你的应用程序。在本文中使用的 iPhone 13（iOS 15.2）进行测试，下面是结果: 图片 啥，底部按钮跑哪里去了？...图片 为什么100vh问题会发生在移动设备上？ 我对这个问题进行了一番调查，发现了其中的原因。简短的答案是，浏览器的工具栏高度没有被考虑在内。...如果你想深入了解为什么会发生这种情况，Stack Overflow的这个帖子很有帮助。 如何修复移动设备上的100vh问题？ 第一个建议是尽量少用 vh。...所以，下面的CSS规则就不会生效： min-height: calc(-webkit-fill-available / 2); 例如，如果需要在元素上有一半的可用高度，必须使用JavaScript。...代码如下： // 以像素为单位计算1vh值 // 基于窗口的内部高度 var vh = window.innerHeight * 0.01; // 将CSS变量设置为根元素 // 相当于1vh document.documentElement.style.setProperty

    1.3K40
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券