文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

iPhone X 适配手Q H5 页面通用解决方案

目前的H5页面可以分为通栏页面和非通栏页面两种，每种页面都可能有底部操作栏，具体如下： 通栏页面 顶部通栏 某些业务的一级页面多数使用了顶部通栏banner的效果，由于iPhone X在状态栏增加了24px...底部Tab栏/操作栏 有些页面使用了底部Tab栏/操作栏，由于iPhone X去掉了底部Home键，取而代之是34px高度的Home Indicator ，对于目前的底部Tab栏/操作栏会造成一定的阻碍...具体是通过链接中增加参数来进行适配: 参数名:_wvx 控制iPhone X适配行为 参数名:_wvxTclr 控制顶部适配层颜色 参数名:_wvxBclr 控制底部适配层颜色 _wvx 作用 1 <<...0 （1） 增加顶部适配层，只对透明导航栏风格有效 1 底部适配层 1 填充颜色，只对透明导航栏风格有效 1 底部适配层颜色在主资源加载完成后填充颜色 对于顶部通栏的页面，通过加URL参数来增加顶部黑色适配层。

13.4K1911
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

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

    iPhone X iPhone X 拥有一个宽大的而且高分辨率的屏幕，从外观看是圆角的，并且扩展到屏幕的边缘。这提供了前所未有的沉浸式体验，可以使我们体验更加丰富的内容。 ?...要确保背景延伸到屏幕的边缘，并且垂直可滚动的布局（例如表格或集合）能够一直延续到底部。 ? 插入必要内容以防止裁剪。...所有的应用程序都应遵循 UIKit 中定义的安全区域和布局边距，这些区域可以根据设备和上下文进行适当的填充。安全区域还能够防止内容把状态栏、导航栏、工具栏和标签栏覆盖掉。 注意状态栏的高度。...避免将交互式控件放置在屏幕最底部和角落里。人们可以使用显示屏底部的滑动手势来访问主屏幕和对应用程序进行切换，这些手势可能会覆盖掉你在此区域中设定的自定义手势。另外屏幕的两个角落令人很难进行有效操作。...不要隐藏设备的圆角和传感器外壳，也不要通过在屏幕顶部和底部放置黑色条的方式来突出主屏幕的指示器。不要使用类似括号、边框、形状或文字之类的视觉装饰来引起人们对这些区域的注意。

    2.5K20

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

    -webkit-overflow-scrolling: touch; /* 当手指从触摸屏上移开，会保持一段时间的滚动 */ -webkit-overflow-scrolling: auto; /* 当手指从触摸屏上移开...产生原因 iPhone X 以及它以上的系列，都采用刘海屏设计和全面屏手势。头部、底部、侧边都需要做特殊处理。才能适配 iPhone X 的特殊情况。...解决方案 设置安全区域，填充危险区域，危险区域不做操作和内容展示。 危险区域指头部不规则区域，底部横条区域，左右触发区域。...判断设备是否属于 iPhone X，给头部底部增加适配层 viewport-fit 有 3 个值分别为： auto：此值不影响初始布局视图端口，并且整个web页面都是可查看的。...40px); padding-top: var(safe-area-inset-top, 40px); } } /* 判断iPhoneX 将 footer 的 padding-bottom 填充到最底部

    5.3K42

    手机QQ空间iPhone X适配总结

    iPhone X尺寸说明 根据苹果iPhone X适配规范，iPhone X屏幕尺寸为375 x 812pt，宽度和iPhone 6/6s/7/8一样，但高度比它们高了145pt，如下图所示。...应用全屏化 如果应用不做修改直接运行在iPhone X上，程序只能获取到和iPhone 6一样的展示界面，通过UIScreen获取到得宽高为375 *667。...而全屏化主要修改的是启动页，如果启动页使用storyboard或者xib文件，那么全屏化无需添加任何操作，同时也推荐使用该方式，但是如果之前使用的images.xassets放置启动页，那么需要把原来的xassets删除了...从刚才全屏化的界面中可以看到，界面底部多了一条黑条，我们将其称为Home Indicator，这是iPhone X新添加的虚拟按键，以替代原来的Home键，它支持的操作有上滑退至多任务界面，左滑和右滑切换当前程序...[image.png] 因此有一些界面我们也是这么修改的，如feed详情页的底部输入框。

    2.2K30

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

    确保背景延伸到显示器的边缘，并且垂直可滚动的布局（如表格和集合）一直延续到底部。 插入必要内容以防止剪辑。...所有应用程序都应遵循UIKit定义的安全区域和布局边距，这些区域可以根据设备和上下文进行适当的填充。安全区域还可以防止内容覆盖状态栏，导航栏，工具栏和标签栏。 注意状态栏的高度。...同样，全屏iPhone X图稿在显示时被裁剪或被柱状显示全屏显示在4.7 寸iPhone上，确保重要的视觉内容保持在两种显示尺寸上。 避免将交互式控件明确放置在屏幕底部和角落。...人们使用显示屏底部的滑动手势访问主屏幕和应用程序切换器，这些手势可能会取消您在此区域中实现的自定义手势。屏幕的两个角落可能是困难的地方让人们舒适地到达。 不要掩盖或特别注意关键显示功能。...请勿尝试隐藏设备的圆角，传感器外壳或通过在屏幕顶部和底部放置黑色条来访问主屏幕的指示器。不要使用像括号，边框，形状或教学文字等视觉装饰，也要特别注意这些区域。 允许自动隐藏指示灯，以便轻松访问主屏幕。

    3.2K50

    H5 页面 iPhoneX 刘海屏适配

    但是为了比较，我这里给出一张苹果官方文档中，iPhone8之前的常规屏幕和刘海屏 Safe Area 区域的对比图。 ?...2、H5 页面在 iOS 中占据全屏页面，在这种情况下，除了要兼顾底部小黑条，我们还要处理页面上部跟 状态栏接触的部分，避免内容出现在状态栏上。...meta 中添加一个新的值：viewport-fit=cover 这么设置之后，视图端口被缩放以填充设备显示...WX20200531-205658@2x.png 可以看到页面的顶部，因为 safe-area-inset-top 避开了状态栏，而底部因为 safe-area-inset-bottom 避开了小黑条，...这里要注意的是，实测时，对于 iPhone XR 我用在 stackoverflow 上找到的 media query 条件来判断不生效，后来经过查找资料，我找到一个在 iPhone XR 上实际可用的条件

    4.8K40

    SwiftUI + Core Data App 的内存占用优化之旅

    滚动到底部后（ 100 条数据 ），内存的占用将在 500 MB 左右。...只有在访问这些托管属性时，Core Data 才会为托管对象进行数据填充（ 如果行缓存中有，从缓存中取；如果没有则将数据从数据库中搬运到行缓存后再从缓存中取 ）。...在本例中，只有视图首次出现在 List 的可视区域时，Item 才会被填充数据。 在托管对象从惰值状态（ Fault ）脱离后，只有在几种特定的条件下，才会重新转换为惰值。...数据的多份拷贝 当图片数据从 SQLite 经 Core Data 最终通过 SwiftUI 显示时，实际上在内存中至少保存了三份拷贝： 行缓存 托管对象上下文（ 托管对象被填充后 ） 显示该图片的 SwiftUI...视图（ body 的值中 ） 在第一轮优化中，我们通过显示控制，修改了离开可视区域的视图 body 值（ 删除了一份 Copy ）。

    1.8K10

    吃透移动端 H5 与 Hybrid｜实践踩坑12种问题汇总

    产生原因 iPhone X 以及它以上的系列，都采用刘海屏设计和全面屏手势。头部、底部、侧边都需要做特殊处理。才能适配 iPhone X 的特殊情况。...解决方案 设置安全区域，填充危险区域，危险区域不做操作和内容展示。 危险区域指头部不规则区域，底部横条区域，左右触发区域。 ?...判断设备是否属于 iPhone X，给头部底部增加适配层 viewport-fit 有 3 个值分别为： auto：此值不影响初始布局视图端口，并且整个web页面都是可查看的。...40px); padding-top: var(safe-area-inset-top, 40px); } } /* 判断iPhoneX 将 footer 的 padding-bottom 填充到最底部...技术无法实现的，从产品出发。 ? 如果技术上实现复杂，或者直接不能实现。不要强行钻牛角尖哦，学会怼产品，也是程序员必备的能力之一。

    2.5K20

    吃透移动端 H5 与 Hybrid｜实践踩坑12种问题汇总

    产生原因 iPhone X 以及它以上的系列，都采用刘海屏设计和全面屏手势。头部、底部、侧边都需要做特殊处理。才能适配 iPhone X 的特殊情况。...解决方案 设置安全区域，填充危险区域，危险区域不做操作和内容展示。 危险区域指头部不规则区域，底部横条区域，左右触发区域。...判断设备是否属于 iPhone X，给头部底部增加适配层 viewport-fit 有 3 个值分别为： auto：此值不影响初始布局视图端口，并且整个web页面都是可查看的。...40px); padding-top: var(safe-area-inset-top, 40px); } } /* 判断iPhoneX 将 footer 的 padding-bottom 填充到最底部...技术无法实现的，从产品出发。 如果技术上实现复杂，或者直接不能实现。不要强行钻牛角尖哦，学会怼产品，也是程序员必备的能力之一。

    1.6K30

    【Hybrid】518- 12种移动端 H5 与 Hybrid问题汇总

    产生原因 iPhone X 以及它以上的系列，都采用刘海屏设计和全面屏手势。头部、底部、侧边都需要做特殊处理。才能适配 iPhone X 的特殊情况。...解决方案 设置安全区域，填充危险区域，危险区域不做操作和内容展示。 危险区域指头部不规则区域，底部横条区域，左右触发区域。 ?...判断设备是否属于 iPhone X，给头部底部增加适配层 viewport-fit 有 3 个值分别为： auto：此值不影响初始布局视图端口，并且整个web页面都是可查看的。...40px); padding-top: var(safe-area-inset-top, 40px); } } /* 判断iPhoneX 将 footer 的 padding-bottom 填充到最底部...技术无法实现的，从产品出发。 ? 如果技术上实现复杂，或者直接不能实现。不要强行钻牛角尖哦，学会怼产品，也是程序员必备的能力之一。

    1.7K22

    airserver2023中文版本安装使用教程

    2）适用于iOS 7，iOS 8和iOS 9从屏幕底部向上滑动以打开控制中心，然后点击“ AirPlay”图标。 选择您的计算机名称，然后点击进行连接。 不要忘记切换镜像开关。...3）适用于iOS 10在运行于iOS 10的iOS设备上，从屏幕底部向上滑动以访问控制中心。 然后，您需要点击“ AirPlay Mirroring”选项。...接下来，从菜单中选择您的计算机以将设备连接到计算机。4）适用于iOS 11iOS 11的方式类似于之前的两种方式，您需要从屏幕底部向上滑动以打开控制中心。...接下来，您需要点击“屏幕镜像”，然后从列表中选择具有您的计算机名称的AirPlay目标。现在，您可以在计算机上看到iPhone或iOS设备屏幕。 如果要停止镜像，只需在设备上点击停止镜像。...获取有关的更多详细信息 从iPhone到Mac的AirPlay.

    2K20

    为什么拼多多的笔试题这么难？

    螺旋遍历：从左上角开始，按照 向右、向下、向左、向上 的顺序 依次 提取元素，然后再进入内部一层重复相同的步骤，直到提取完所有元素。...res 数组，从索引位置 0 的地方开始填充 int index = 0; // 使用一个 while 循环进行打印，只要打印区间中还有值就一直打印...// 整个打印区间需要删除这一行了，因此，将 top 的层数向下挪 top += 1; // 如果此时发现顶部位置越过了底部位置，说明整个打印区间已经没有元素了...，开始填充下一个元素 index++; } // 经过上面这个循环之后，此时，底部这一层的所有元素已经打印完毕...// 整个打印区间需要删除这一行了，因此，将 bottom 的层数向上挪 bottom -= 1; // 如果此时发现顶部位置越过了底部位置，说明整个打印区间已经没有元素了

    44000

    面了一圈，一个 offer 也没收到...

    题目描述如下： 输入一个矩阵，按照从外向里以顺时针的顺序依次打印出每一个数字。...res 数组，从索引位置 0 的地方开始填充 int index = 0; // 使用一个 while 循环进行打印，只要打印区间中还有值就一直打印...// 整个打印区间需要删除这一行了，因此，将 top 的层数向下挪 top += 1; // 如果此时发现顶部位置越过了底部位置，说明整个打印区间已经没有元素了...，开始填充下一个元素 index++; } // 经过上面这个循环之后，此时，底部这一层的所有元素已经打印完毕...// 整个打印区间需要删除这一行了，因此，将 bottom 的层数向上挪 bottom -= 1; // 如果此时发现顶部位置越过了底部位置，说明整个打印区间已经没有元素了

    52050

    我曾经在极端愤怒的情况下做不出简单题！

    题目描述如下： 输入一个矩阵，按照从外向里以顺时针的顺序依次打印出每一个数字。...res 数组，从索引位置 0 的地方开始填充 int index = 0; // 使用一个 while 循环进行打印，只要打印区间中还有值就一直打印...// 整个打印区间需要删除这一行了，因此，将 top 的层数向下挪 top += 1; // 如果此时发现顶部位置越过了底部位置，说明整个打印区间已经没有元素了...，开始填充下一个元素 index++; } // 经过上面这个循环之后，此时，底部这一层的所有元素已经打印完毕...// 整个打印区间需要删除这一行了，因此，将 bottom 的层数向上挪 bottom -= 1; // 如果此时发现顶部位置越过了底部位置，说明整个打印区间已经没有元素了

    70220

    Cell 动态行高文字显示不全问题探索

    但是内容距离 cell 底部的距离太小了，并没有大于 9。猜测：这个底部约束因为优先级是Low，所以被系统舍弃，使得内容可以显示完整，同时导致内容距离 cell 底部的距离太小。...但是，当我尝试设置底部约束的为 >= 9+8=17，再运行，居然就是我想要的效果： [Simulator Screen Shot - iPhone SE (1st generation) - 2021-...当我们把底部约束的优先级降低到 Low 时，cell 在之前预估行高的基础上，根据约束重新布局，舍弃的就是低优先级的底部约束了，因此才能看到低优先级底部约束开始生效，后来因 setFrame 减小了高度...，导致底部间隔变小的效果。...但是，当 cell 有选中效果或左滑删除效果时，相关效果就不是很好了，因为分隔线 View 属于 cell 的一部分被一起选中或移动，看起来效果有点不太好。 好了，这次的探索就到这里了。

    2.7K00

    12个关于移动 H5 开发的采坑问题汇总

    产生原因 iPhone X 以及它以上的系列，都采用刘海屏设计和全面屏手势。头部、底部、侧边都需要做特殊处理。才能适配 iPhone X 的特殊情况。...解决方案 设置安全区域，填充危险区域，危险区域不做操作和内容展示。 危险区域指头部不规则区域，底部横条区域，左右触发区域。...判断设备是否属于 iPhone X，给头部底部增加适配层 viewport-fit 有 3 个值分别为： auto：此值不影响初始布局视图端口，并且整个web页面都是可查看的。...40px); padding-top: var(safe-area-inset-top, 40px); } } /* 判断iPhoneX 将 footer 的 padding-bottom 填充到最底部...技术无法实现的，从产品出发。 如果技术上实现复杂，或者直接不能实现。不要强行钻牛角尖哦，学会怼产品，也是程序员必备的能力之一。

    2.1K42
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

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

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

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

      领券