解决iphone11及以上适配问题

最新推荐文章于 2024-04-02 15:01:24 发布
置顶 最新推荐文章于 2024-04-02 15:01:24 发布
阅读量2.8k 收藏 2
点赞数
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tylls/article/details/106626622
版权
本文介绍了如何解决iPhone11及以上型号手机的屏幕适配问题，重点在于理解安全区域、viewport-fit、env()和constant()的概念，并提供了针对fixed元素的适配步骤和代码示例，帮助开发者实现完美适配。
摘要由CSDN通过智能技术生成

解决iphone11及以上适配问题

前言

iPhoneX 取消了物理按键，改成底部小黑条，这一改动导致网页出现了比较尴尬的屏幕适配问题。对于网页而言，顶部（刘海部位）的适配问题浏览器已经做了处理，所以我们只需要关注底部与小黑条的适配问题即可（即常见的吸底导航、返回顶部等各种相对底部 fixed 定位的元素）。

笔者通过查阅了一些官方文档，以及结合实际项目中的一些处理经验，整理了一套简单的适配方案分享给大家，希望对大家有所帮助，以下是处理前后效果图：
Alt

适配之前需要了解的几个新知识

安全区域

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

最低0.47元/天 解锁文章
你可以猜猜
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
H5及H5+app对iphoneX及以上适配
AIGC大前端小王子
07-25 739
本文主要介绍对iphoneX及以上适配。提供css和js的适配方式。 一、设置网页在可视窗口的布局方式 <meta name="viewport" content="width=device-width, viewport-fit=cover"> 注：viewport-fit=cover使得页面内容完全覆盖整个窗口 二、页面主体内容限定在安全区域内 body { padd...
vant-ui 下拉刷新安卓机和苹果机处理
qq_39852835的博客
09-22 786
如下图直接复制vant ui 上的代码，在安卓机上上滑会触发下拉刷新状态。 <template> <van-pull-refresh v-model="refreshing" @refresh="onRefresh"> <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" > <van-cell v-
CSS适配iPhone全面屏的方法
11-21
一、media query方式 /*iPhone X 适配*/ @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) { .fixed-bottom{ bottom: 37px; } } /*iPhone XS max 适配*/ @media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ra
【前端】vant组件移动端兼容性问题汇总
网页设计作业、webgis作业承接
12-21 4986
记录使用vant组件开发过程中遇到的兼容性问题
vue引入vant版本兼容问题
weixin_43561427的博客
05-10 2057
正常vue.3.x按照官网进入到工程目录下 执行npm i vant -S，若是vue2则可能报错 需要降低vant版本，亲测降为2.12.2可以解决 先npm uninstall vant卸载，再npm install --save vant@2.12.2则可
vue+vant移动端遇到的那些问题
weixin_41700532的博客
03-21 2万+
1、项目引用了lib-flexible 跟px2rem-loader做适配，然后真机测试的时候发现字体在手机上显示的很小。【推荐去看下px2rem-loader的文档】 原因+解决：百度说应该在后面加上/*px*/（font-size:14px;/*px*/），这里这么设置时，字体的大小要为两倍，如你想让字体显示为14px,css代码则为【font-size:28px;/*px*/】，对于bor...
vue3+vant 移动端适配问题
weixin_46116817的博客
07-01 127
postcss-pxtorem 是一款 postcss 插件，用于将 px 单位转化为 rem。lib-flexible 用于设置 rem 基准值。
ios 11和iphone x的相关适配问题及解决方法
08-28
iOS 11和iPhone X的相关适配问题及解决方法是指在iOS 11中出现的一些适配问题，例如tableView莫名偏移问题和scrollView默认位移问题，以及iPhone X的特殊适配问题。下面是相关知识点的详细介绍。 1. 安全区域（Safe...
iPhoneX无导航栏页面适配问题解决方案
01-06
原全屏适配在iPhoneX会由于安全区域的变化导致显示不全。 解决方案如下： 在self.view上添加一个view，剩下的视图基于该view布局，view的约束随self.view.safeAreaInsets的改变需要重置： - (void)viewDidLoad { ...
浅谈iphone X的简单适配问题(推荐)
08-28
在本文中，我们将深入探讨如何解决iPhone X的适配问题，这是iOS开发中一个重要的环节。随着iPhone X的推出，其独特的设计特性，如无Home键、全面屏以及“前刘海”（Notch），给开发者带来了新的挑战。尽管苹果提供了...
vant4的TextEllipsis 文本省略，禁用展开，收起方法
最新发布
qq_52335038的博客
04-02 891
实现多行文本展示，规定大于3行，显示省略号...和查看全部按钮；（并且考虑兼容性问题）
在Vue中引入vant报错（解决办法）
用心创作每一篇文章
02-07 2733
2、以不同的vant版本暗转：npm install -S vant@2.12.2。2、降低npm版本：npm install npm@6.13.4 -g。因为可能会产生依赖冲突，所以一般会在后面加上 -f 强制执行。注意：可能会遇到版本兼容的问题，此时运行项目会报黄。在Vue项目的main.js文件中写入如下代码。你会发现项目跑不了了。1、先卸载掉vant。1、先卸载点vant。
汇总 vue 移动端 苹果端和安卓端的兼容性问题
青蛙背蝎子过河的博客
12-01 9607
   项目中遇到的苹果safari不兼容的问题太多了.在这里整理一下.希望能帮助到在走弯路的人.        1. 日期格式问题. 这个问题应该是遇到最多的.也是最多被熟知的.safari不识别2018-08-08的日期格式.会显示NaN.          解决方式: 在处理日期之前转换为2018/08/08的格式.        2. 设置了input背景颜色在safari颜色异常显示...
Vue项目自动转换 px 为 rem
hammer1010的博客
05-21 2008
Vue项目自动转换 px 为 rem 前提条件 1.脚手架vue-cli 搭建好 2.vue项目可以正常运行 1、创建rem.js文件 创建一个utils文件，添加一个rem.js文件 // 基准大小 const baseSize = 32 // 设置 rem 函数 function setRem () { // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。 const...
一上午试错，总结vue项目引入Vant遇到的坑
k_e_vi_n的博客
05-31 1万+
首先贴上vant官网教程https://youzan.github.io/vant/#/zh-CN/quickstart 下面是我的代码以及问题，采用的是官网中第一种推荐使用的按需引入组件方法 1、cmd 进入到工程目录下 执行npm i vant -S 2、安装插件babel-plugin-import是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式 执行npmibabel-plugin-import-D 3、在.babelr...
微信小程序中vant倒计时组件ios设备显示异常,不兼容问题
雨落宿命敲的博客
11-28 3057
微信小程序中vant倒计时组件ios设备显示异常,不兼容问题 在微信小程序的前端开发中,引用了vant中CountDown 倒计时组件,在开发者工具或是安卓设备上时都能正确预览和使用,但发现在ios设备上运行时却不行 查阅资料后发现 在 iOS 系统上倒计时不生效？ 如果你遇到了在 iOS 上倒计时不生效的问题，请确认在创建 Date 对象时没有使用new Date(‘2020-01-01’)这样的写法，iOS 不支持以中划线分隔的日期格式，正确写法是new Date(‘2020/01/01’)。 原来
踩过的坑—iphone手机H5样式兼容总结
my88396的博客
05-28 1万+
        对一个前端开发者来说，最煎熬的莫过于"兼容"两个字了（说到这个词朋友们是不是身体一抖），哪怕对于工作多年的老油条来讲，也不是完全了解各种场景下的兼容性处理方法。在这里我就把我在工作当中遇到的关于iphone手机h5页面的兼容性处理和大家分享一下。html,body{ -webkit-text-size-adjust: none; }  // 当需要在中文版chrome浏览器中显示小...
vue x 兼容iphone_详解关于移动端兼容iPhoneX底部小黑条
weixin_39953356的博客
12-20 874
场景由于iPhoneX去掉了物理按键，改为了底部小黑条，这就会导致屏幕适配问题，最常见的场景就是底部fixed的元素被阻挡的情况。对于这种问题，我们一般采取css或js的处理方式(适用于h5，小程序)。css适配方案(推荐)第一步：设置网页的头部标签viewport-fit：IOS11新增的特性，是为了iPhoneX而对meta标签做出的一个拓展属性。目前有三个值：contain 可视窗口完全包含...
safe-area-inset-bottom iphone
热门推荐
飞翔的熊blabla
07-10 4万+
屏幕尺寸我们熟知的iPhone系列开发尺寸概要如下：△ iPhone各机型的开发尺寸转化成我们熟知的像素尺寸：△ 每个机型的多维度尺寸倍图其实就是像素尺寸和开发尺寸的倍率关系，但这只是外在的表现。倍图核心的影响因素在于PPI（DPI），了解屏幕密度与各尺寸的关系有助于我们深度理解倍率的概念：《基础知识学起来！为设计师量身打造的DPI指南》iPhone8在本次升级中，屏幕尺寸和分辨率都遗传了iPho...
移动端适配详细操作教程.pdf
02-06
移动端适配详细操作教程，图文并茂

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值