IOS移动端横竖屏适配与刘海适配

最新推荐文章于 2024-05-16 16:59:59 发布
最新推荐文章于 2024-05-16 16:59:59 发布
阅读量3.1k 收藏 4
点赞数 1
分类专栏： 前端实战bug杀手 文章标签： ios 前端 css3 html5 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014213847/article/details/127778782
版权

iphoneX手机取消了实体Home键，取而代之的是主界面底部不显眼的横条“Home Indicator”。也就是从 iPhone X 开始出现了刘海和底部的黑条的区域，当网页底部fixed 元素时候，一部分元素可能就被这个横条遮挡住，横屏时又可能被刘海挡住，怎么适配解决呢？

左侧是被遮盖图，右侧是修改bug后的图

 

在iOS11 之后有这么一个概念safeArea（安全区域），这里主要探讨一下safeArea相关的两个概念，safeAreaLayoutGuide和safeAreaInsets。
在官网上有这么两张图片：

 安全区域指的是一个可视窗口范围，处于安全区域的内容不受圆角（corners）、齐刘海（sensor housing）、小黑条（Home Indicator）影响。

具体适配方案如下：

     1.从iOS11开始，为了适配刘海屏，Apple公司对HTML的viewport meta标签做了扩展&#x

最低0.47元/天 解锁文章
前端赛色迷
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
iOS 屏幕适配 iPhone X SafeArea安全区域
iOS开发程序媛
09-06 5234
三月份工作 9月份才开始自己主动了解安全区域适配问题 一. 前言 本文的出发点是对iOS设备的适配, 我们之前的适配只是考虑设备的尺寸, 设备的方向, 而在iPhoneX出来之后呢, 我们又多了一种考量, 那就是刘海和底部横条(HomeIndicator), 我们通过UIKit11.0之后新增的API来解决这个问题, 达到不同设备尺寸, 不同设备方向的完美适配. 二. 之前的做法 注...
iphone刘海屏页面适配方法
11-29
1. 下面是实现iphonex 刘海屏前端页面适配的一个插值算法小案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body, ul { margin: 0; } ul { padding-left: 10px; } li { list-style: none; } .phone { position: relative; w
2024年最全Android刘海屏、水滴屏全面屏最佳适配方案，面试官不讲武德怎么说
最新发布
2401_84538135的博客
05-16 416
我见过很多技术leader在面试的时候，遇到处于迷茫期的大龄程序员，比面试官年龄都大。这些人有一些共同特征：可能工作了5、6年，还是每天重复给业务部门写代码，工作内容的重复性比较高，没有什么技术含量的工作。问到这些人的职业规划时，他们也没有太多想法。其实30岁到40岁是一个人职业发展的黄金阶段，一定要在业务范围内的扩张，技术广度和深度提升上有自己的计划，才有助于在职业发展上有持续的发展路径，而不至于停滞不前。不断奔跑，你就知道学习的意义所在！
ios 刘海屏，灵动岛的适配以及遇到一些坑点
Web面试那些事儿的博客
10-20 2237
最近再改公司内部移动端 ios 安全区域适配的问题，所谓知己知彼百战百胜，所以深入的学习了一下 安全区域适配有关的知识。
iOS 刘海屏适配（iPhoneX，iPhone11，iPhone12）
baidu_40537062的博客
11-30 1649
iOS适配iPhoneX/iphone11/iphone12 导航栏高度 (刘海屏幕) iOS刘海屏适配，iPhoneX、iPhone12系列导航栏高度，刘海平适配
原生内嵌H5移动端，解决ios刘海屏适配问题
qq_45442879的博客
07-03 797
原生内嵌H5移动端，解决ios刘海屏适配问题。
IOS刘海屏安全区域适配
weixin_57456011的博客
08-03 330
会出现内容展示不出来的问题。另外需要设置容器高度为。为不包含安全区域的高度。
IOS适配横竖屏，适配所有机型
12-29
"IOS适配横竖屏，适配所有机型"的标题和描述暗示了本文将深入探讨如何在iOS应用中实现对不同屏幕方向（横屏和竖屏）以及各种设备型号（如iPhone 6）的支持。以下是对这一主题的详细解释： 1. **屏幕方向适配**： -...
IOS11新特性与兼容适配
08-28
- **适配iPhone X**：针对iPhone X的特殊设计，如刘海屏和无Home键，开发者需要调整界面布局，确保内容不会被切割或隐藏。例如，使用`safeAreaInsets`来确保内容不会被顶部和底部的传感器区域覆盖。 - **测试**：...
iOS WKWebView适配实战篇
08-19
iOS WKWebView适配实战篇 iOS WKWebView适配实战篇主要介绍了WKWebView适配实战篇的内容，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值。下面我们将对WKWebView适配实战篇的知识点...
MUI IOS11以上刘海屏APP打包状态栏
Tortoise_shell的博客
11-17 571
MUI IOS11以上刘海屏APP打包状态栏 mui框架开发的APP，由于ios11以上的刘海屏的出现，导致打包时会出现标题栏被刘海覆盖，底部切换栏在最下方显示不全。 注意 在manifest.json中检查是否设置了fullscreen节点（全屏显示的设置----“fullscreen”：true）； 在H5+app页面中的head的mate中是否有加入<meta name="viewport" content="width=device-width,initial-scale=1,maxim
IOS安全区域适配
EmotionComputer
02-17 6244
iOS安全区域适配
H5：IOS刘海屏适配
KWMax
12-22 3950
场景 app部分页面使用H5混合开发，框架使用的是Vue。页面基本在Android上展示正常，在ios（iPhone 7、iPhone X、iPhone 11）上会出现两个问题： (1) 顶部标题栏即便是fixed定位，top为0，依然会留有一点缝隙，滑动的时候刘海左右两边可见滑动内容。 (2) H5页面底部太贴近手机底部小黑条。 三种方案 根据问题场景，我想到了以下三个解决方案，...
IOS关于刘海屏适配问题解决办法
SP的博客
12-05 4419
前言 本人项目采用Objective-C进行开发，如果swift语言请自行参考，在后期适配过程中整理的相关经验。首先我们来看一下苹果相关屏幕尺寸 官方说明 在官网上有这么两张图片： 在iOS11 之后有这么一个概念safeArea（安全区域，具体safeArea是怎么一回事自行google），这里主要探讨一下safeArea相关的两个概念，safeAreaLayoutGuide和safeAre...
安卓适配刘海屏手机
阿甘正传
05-16 621
在安卓开发中，我们除了需要适配不同手机的手机分辨率外，还需要适配手机上的虚拟状态栏和导航栏的高度，这其中又不乏有一些手机的手机屏幕格外的与众不同，比如今天我们需要了解的“刘海屏”。什么是“刘海屏”？屏幕的正上方居中位置（下图黑色区域）会被挖掉一个孔，屏幕被挖掉的区域无法正常显示内容，这种类型的屏幕就是刘海屏，也有其他叫法：挖孔屏、凹凸屏等等，这里统一按刘海屏命名。 目前网上也有很多适配安卓手机“刘...
iOS刘海屏适配，导航栏高度，工具栏高度，滚动范围
热门推荐
鹏仔的技术博客
09-13 3万+
当前iPhone有两种主要屏幕有2种类型：刘海屏、方屏(SE、Plus、7、8)配新iPhone，且SE一直在更新，那么两种屏幕样式一段时间内会共存，所以每个页面都应该考虑做好适配
css适配ios移动端
09-02
在适配 iOS 移动端的 CSS 中，可以考虑以下几个方面： 1. 使用 viewport meta 标签：在 HTML 的 head 部分添加以下代码，以确保页面按照设备的宽度进行缩放和布局。 ``` <meta name="viewport" content="width=device-width, initial-scale=1.0"> ``` 2. 使用相对单位：使用相对单位（例如 em、rem、vw、vh）来定义字体大小、宽度、高度和间距等属性，这样页面元素可以根据屏幕大小进行自适应。 3. 避免固定宽度和高度：尽量避免使用固定的宽度和高度值，而是使用百分比或相对单位来定义元素的尺寸，以便在不同屏幕尺寸上保持一致性。 4. 媒体查询：使用媒体查询来根据屏幕尺寸应用不同的 CSS 样式。例如，可以使用 @media 查询来为 iPhone 或 iPad 等设备应用特定的样式。 5. CSS Flexbox 或 Grid 布局：使用 Flexbox 或 Grid 布局可以轻松实现响应式布局，并自动调整元素的位置和大小，以适应不同的屏幕尺寸。 6. 测试和调试：在开发过程中，使用 iOS 模拟器或真实的 iOS 设备进行测试和调试，以确保页面在不同的 iOS 设备上呈现正常。 这些是一些常见的方法，可以用来适配 iOS 移动端的 CSS。根据具体需求和项目要求，可能还需要采用其他的适配策略。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值