iphoneX兼容记录

最新推荐文章于 2021-12-23 09:43:53 发布
原创 最新推荐文章于 2021-12-23 09:43:53 发布 · 865 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

viewport解决

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0,minimal-ui, viewport-fit=cover" />

添加

viewport-fit=cover


吸顶和吸底给出的解决方案是

padding-top:constant(safe-area-inset-top);

padding-bottom:constant(safe-area-inset-bottom);


记录

quxiaolei
关注
iPhoneX样式适配兼容问题
SANJIN0527_的博客
12-30 824
问题出处： 在我们进行定位时要距离底部tab 100px 在安卓手机距离底部达到了我们的预期效果 但苹果手机没有 这时候我们就要写一下样式的适配 1、网页在可视窗口的布局方式 viweport-fit 属性： iOS11 新增特性，苹果公司为了适配 iPhoneX 对现有 viewport meta 标签的一个扩展，用于设置网页在可视窗口的布局方式，可设置三个值： contain: 可视窗口完全包含网页内容 cover：网页内容完全覆盖可视窗口 auto：默认值，跟 contain 表现一致 更详细说
模块联邦微前端系列（一）初始化React+Ts主、子应用
最新发布
cgcgcg2121的博客
06-04 1571
ps：虽然有商用的完善方案，但是不建议在没有做过评估的情况下盲目使用架构：插件化结构，一个主工程（以下简称rich）和n个子工程（即插件plugin）。需要达到效果为，主工程动态加载子工程页面，主工程负责整个应用的框架、通用方法、路由管理等。子工程建议和主工程使用相同技术栈，我采用的ts+react，因为个人比较喜欢tailwindcss，所以样式相关问题建议根据自己的需求来定制。模块联邦不一定非要使用webpack初始化项目，其他脚手架也可以使用原生webpack的配置或者其它插件去实现。
iOS-为你的应用兼容iPhone X
dingyawei123的专栏
09-20 1338
每年苹果爸爸都会在六月份的WWDC上发布有关下一代iOS的新特性和改动内容，开发者们有半年时间去准备和兼容最新版本的iPhone和操作系统。 但是这一次为了在发布会前不泄露iPhone X的相关信息（实际上我们早就知道了=。=），苹果知道昨天才在官网上线了兼容全面屏的指导文档和视频。离iPhone X正式上市还有两个月不到的时间，我们需要为我们的app做哪些准备呢？
iPhone X 兼容问题
weixin_40404336的博客
11-27 1374
iPhone X 兼容问题 对容器设置对应的安全区域 .routers{ box-sizing: border-box; padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-le...
ios底部白条（安全区处理），让背景能够铺满安全区
Jonn1124的博客
12-23 3619
标题 第一步 1.viewport-fit=cover 重点 <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1, user-scalable=no,minimal-ui,viewport-fit=cover"/> 2.body 设置 body { height: 100%; width: 100%; /*overflow-x:hidden
H5页面适配 iPhoneX，就是这么简单
sunsineq的专栏
07-10 659
前言 iPhoneX 取消了物理按键，改成底部小黑条，这一改动导致网页出现了比较尴尬的屏幕适配问题。对于网页而言，顶部（刘海部位）的适配问题浏览器已经做了处理，所以我们只需要关注底部与小黑条的适配问题即可（即常见的吸底导航、返回顶部等各种相对底部 fixed 定位的元素）。 笔者通过查阅了一些官方文档，以及结合实际项目中的一些处理经验，整理了一套简单的适配方案分享给大家，希望对大家有所帮助，以下是处理前后效果图： 适配之前需要了解的几个新知识 安全区域 安全区域指的是一个可视窗口范围，处于安全
前端：viewport-fit解决iphoneX的“刘海”问题
weixin_30537451的博客
11-03 3329
iphoneX的“刘海”为相机和其他组件留出了空间，同时在底部也留有可操作区域。那么网站边尴尬了~被限制在了这样的“安全区域”内，两边会出现一道白条。解决的方案是：1、给body添加一个background；2、添加viewport-fit=cover meta标签，使页面占满整个屏幕。 <meta name="viewport" content="width=device-width...
iPhoneX 各种适配记录笔记（超全面）
08-28
通过合理利用Safe Area和调整约束，开发者可以创建出既美观又功能完备的iOS应用，同时兼容iPhone X和其他设备。对于游戏开发者来说，尽管初期可能存在适配问题，但大多数游戏厂商会在新设备上市前完成适配，以保证...
iPhoneX适配与MJRefreh适配的实现方法
1. **更新MJRefresh库**：确保使用的MJRefresh版本是兼容iOS 11和iPhoneX的最新版本。 2. **使用自动布局**：通过Auto Layout适配不同的屏幕尺寸，包括iPhoneX的特殊屏幕比例和底部空间。 3. **自定义刷新控件**：...
【优化专家】：提升小程序和H5页面兼容性，优化iPhone X用户体验（稀缺性）
![【优化专家】：提升小程序和H5页面兼容性，优化...本文分析了iPhone X显示特性对兼容性优化的影响，并提出了针对小程序和H5页面的兼容性优化策略。文中详细探讨了iPhone X的显示技术、视口适配、安全区域布局适配等技
iPhone X适配iOS 11：掘金客户端开发实战与解决方案
由于iPhone X的发布，特别是其特有的齐刘海设计（True Tone和Face ID），开发者面临了新的屏幕尺寸和布局调整的需求。Xcode 9 GM种子版本的引入，使得适配过程相对平滑，虽然Swift 3.0升级到Swift 4.0是一个提示但...
【适配指南】：确保H5页面在iPhone X上的完美适配（急迫性）
![【适配指南】：确保H5页面在iPhone X上...本文首先探讨了H5页面适配的必要性和面临的挑战，接着深入分析了iPhone X等特定设备的显示特性及适配原理，强调了媒体查询、CSS视口单位和布局技术的应用。实践中，探讨了安
移动前端适配方法总结
旧事酒浓丶热茶
07-13 394
所谓前端适配，就是为了让移动设计稿在大部分的移动设备上看起来有一致的展示效果，目前比较流行的方法有两种。各有利弊，使用第一种在某些浏览器的webview里面会出现兼容问题，而且对于1像素会无法渲染。而用rem的方案在背景和字体上也会有某些问题。 方案一：强制meta viewport的宽度为设计稿的宽度 把下面的代码放在头部，然后制作稿跟PC上一样的制作就行 // 根据设计稿的宽度来传参...
meta标签中的minimal-ui
weixin_35022783的博客
11-06 2553
meta name="viewport" content=" minimal-ui"> 请见科普 http://36kr.com/p/210516.html
苹果刘海全面屏底部留白问题解决（viewport-fit=cover）
KevinXin的博客
10-15 7894
在meta标签设置viewport-fit=cover，页面就会填充整个刘海区域（前提是浏览器或套页面的app必须做了iphonex的兼容）。 <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> 如果上面属性设置之后，再把html,boby高度设置成100% 发现底部出现空白没有填满，这主要是这里的100%，只是安全区域的高度，是不包含非安全区域的。要使页面元
对于iphone X 兼容性处理的css适配方法和js适配方法
热门推荐
zhaoshuang1010的专栏
12-28 3万+
1. 如果想全屏覆盖，html里面请使用 viewport-fit=cover"> ps:我的实际项目里，只在手机qq 里面去访问页面时候 出现底部灰色安全区域块，可以说现在大部分公司页面都没有做兼容，包括百度，美团，京东... so  html 加此属性，网页就可以全屏覆盖。 2.如果想对某个元素进行底部上移或者顶部下移可以做以下适配。    注：如
网页适配 iPhoneX，就是这么简单
前端大全
11-27 5656
（点击上方公众号，可快速关注） 来源：凹凸实验室 https://aotu.io/notes/2017/11/27/iphonex/ 前言 iPhoneX 取消了物理按键，改成底部小黑条，这一改动导致网页出现了比较尴尬的屏幕适配问题。对于网页而言，顶部（刘海部位）的适配问题浏览器已经做了处理，所以我们只需要关注底部与小黑条的适配问题即可（即常见的
CSS笔记（兼容iphoneX）
KeePCoding
05-04 4578
要兼容IphoneX，尤其是使用 position: fixed;bottom: 0; 样式时，要确保底部栏处于安全区域，这篇文章讲得很仔细明白——《关于H5页面在iPhoneX适配》
常用数组字符串数据操作
southone_problem
12-27 1万+
首先在app.js中判断是否是哪种设备 globalData: { isIphoneX: false, userInfo: null }, onShow:function(){ let that = this; wx.getSystemInfo({ success: res=&gt;{ // console.log('手机信息res'+res.model) let modelm...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值