css适配iPhone X

最新推荐文章于 2023-05-22 16:13:06 发布
最新推荐文章于 2023-05-22 16:13:06 发布
阅读量337 收藏
点赞数
分类专栏： CSS 文章标签： css iphone
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35771141/article/details/120739366
版权

env()和constant()，是IOS11新增特性，Webkit的css函数，用于设定安全区域与边界的距离，有4个预定义变量：

safe-area-inset-left：安全区域距离左边边界的距离
safe-area-inset-right：安全区域距离右边边界的距离
safe-area-inset-top：安全区域距离顶部边界的距离
safe-area-inset-bottom ：安全距离底部边界的距离

css适配iPhone刘海屏机型
Wangdr的博客
03-07 4818
一般情况下iPhoneX适配方法有三种。3.css的媒体查询(建议使用)
CSS 适配 iPhoneX 全面屏
dlf_0610的博客
06-08 3012
CSS 网页适配 iPhoneX，就是这么简单 展开 前言 iPhoneX 取消了物理按键，改成底部小黑条，这一改动导致网页出现了比较尴尬的屏幕适配问题。对于网页而言，顶部（刘海部位）的适配问题浏览器已经做了处理，所以我们只需要关注底部与小黑条的适配问题即可（即常见的吸底导航、返回顶部等各种相对底部 fixed 定位的元素）。 笔者通过查阅了一些官方文档，以及结合实际项目中的一些处理经验，整理了一套简单的适配方案分享给大家，希望对大家有所帮助，以下是处理前后效果图： 适配之前需要了解的几个新知识 安全区域
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
【css】适配iphoneX
weixin_30655569的博客
04-15 299
/*适配iphoneX*/ @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) { .page_nav{ padding-bottom: 0.4rem; } } 转载于...
css如何适配iPhoneX
GotYou_Ac的博客
06-08 491
网页适配iPhoneX iPhoneX 取消了物理按键，改成底部小黑条，这一改动导致网页出现了比较尴尬的屏幕适配问题。对于网页而言，顶部（刘海部位）的适配问题浏览器已经做了处理，所以我们只需要关注底部与小黑条的适配问题即可（即常见的底部导航、返回顶部等各种相对底部 fixed 定位的元素）。 安全区域 安全区域指的是一个可视窗口范围，处于安全区域的内容不受圆角（corners）、齐刘海（sensor housing）、小黑条（Home Indicator）影响。即我们要做好适配，必须保证页面可视、可操作区域
CSS 网页适配 iPhoneX
qq_41766081的博客
06-08 234
CSS 网页适配 iPhoneX，就是这么简单 前言 iPhoneX 取消了物理按键，改成底部小黑条，这一改动导致网页出现了比较尴尬的屏幕适配问题。对于网页而言，顶部（刘海部位）的适配问题浏览器已经做了处理，所以我们只需要关注底部与小黑条的适配问题即可（即常见的吸底导航、返回顶部等各种相对底部 fixed 定位的元素）。 笔者通过查阅了一些官方文档，以及结合实际项目中的一些处理经验，整理了一套简单的适配方案分享给大家，希望对大家有所帮助，以下是处理前后效果图： 适配之前需要了解的几个新知识 安全区域 安全区
css iohone手机端适配,【css】适配iphoneX
weixin_35348268的博客
08-03 224
查看某个线程占得CPU高jps得到pid pidstat -p [pid] -t 1 5 -t表示显示该进程里面所有的线程的信息 06:20:32 PM TGID TID %usr ...50条LINUX命令整理1.find 基本语法参数如下: find [PATH] [option] [action] # 与时间有关的参数: -mtime n : n...
使用 css 适配 iphoneX 刘海屏
小白阿里里的博客
03-30 2496
iphoneX 刘海屏幕导致 h5 页面不能正常的全屏显示了，就需要对 页面进行适配，下面就详细说说如何适配。 首先上一张适配之前的图： 可以看到页面顶部被遮挡，底部贴着最下面 ios11 增加新特性，增加webkit 的 css 函数，css 预定义变量 四个预定义变量为设定安全区域和边界的距离，如下: safe-area-inset-left：安全区域距离左边边界距离 safe-area-i...
IphoneX底部适配的实现
12-10
这里，`.contact-box`元素添加了`fix-iphonex-bottom`类，这个类会将元素的底部内边距调整为34px，以避开iPhone X系列的底部触控区域。而`.iphone-footer-bg`元素则添加了`iphonexshow`类，显示一个34px高的背景条，...
苹果x css适配,CSS如何适配iPhone全面屏 CSS适配iPhone全面屏方法
weixin_39578516的博客
08-03 812
本篇文章小编给大家分享一下CSS适配iPhone全面屏方法，通过文中代码详细介绍了适配方法，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。一、media query方式/*iPhone X 适配*/@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-dev...
CSS移动端iPhoneX系列底部兼容
最新发布
weixin_65635437的博客
05-22 878
CSS移动端iPhoneX系列底部兼容
CSS-微信小程序-部分ios机型按钮border丢失
weixin_43937466的博客
10-09 1824
问题： 部分ios机型按钮border丢失，部分手机浏览器不能识别0.5px，当做0处理。 在iPhone 11 Pro Max上显示效果如下图 详情参考：https://timor419.github.io/2020/10/09/CSS-border/#more 产生这样的代码如下： WXML <view class="second-time flex-row> 文案 </view> WXSS .second-time { width: 162rpx;
如何用CSS适配iPhoneX底部小横条
张媛的博客
03-29 1967
前言 iPhoneX 取消了物理按键，改成底部小黑条，这一改动导致网页出现了比较尴尬的屏幕适配问题。对于网页而言，顶部（刘海部位）的适配问题浏览器已经做了处理，所以我们只需要关注底部与小黑条的适配问题即可（即常见的吸底导航、返回顶部等各种相对底部 fixed 定位的元素）。 笔者通过查阅了一些官方文档，以及结合实际项目中的一些处理经验，整理了一套简单的适配方案分享给大家，希望对大家有所帮助. 适配之前需要了解的几个新知识 安全区域 安全区域指的是一个可视窗口范围，处于安全区域的内容不受圆角（cor
css样式匹配苹果个型号手机
weixin_30446613的博客
01-14 461
/*适配苹果X*/ @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) { .header_nav { top: 44px; } } /*适配苹果X smart Max*/ @med...
对于iphone X 兼容性处理的css适配方法和js适配方法
热门推荐
zhaoshuang1010的专栏
12-28 3万+
1. 如果想全屏覆盖，html里面请使用 viewport-fit=cover"> ps:我的实际项目里，只在手机qq 里面去访问页面时候 出现底部灰色安全区域块，可以说现在大部分公司页面都没有做兼容，包括百度，美团，京东... so  html 加此属性，网页就可以全屏覆盖。 2.如果想对某个元素进行底部上移或者顶部下移可以做以下适配。    注：如
CSS笔记（兼容iphoneX）
KeePCoding
05-04 4549
要兼容IphoneX，尤其是使用 position: fixed;bottom: 0; 样式时，要确保底部栏处于安全区域，这篇文章讲得很仔细明白——《关于H5页面在iPhoneX适配》
CSS 网页适配 iPhoneX，就是这么简单
快乐de馒头
01-21 3410
前言 iPhoneX 取消了物理按键，改成底部小黑条，这一改动导致网页出现了比较尴尬的屏幕适配问题。对于网页而言，顶部（刘海部位）的适配问题浏览器已经做了处理，所以我们只需要关注底部与小黑条的适配问题即可（即常见的吸底导航、返回顶部等各种相对底部 fixed 定位的元素）。 笔者通过查阅了一些官方文档，以及结合实际项目中的一些处理经验，整理了一套简单的适配方案分享给大家，希望对大家有所帮助，以...
iPhone全面屏 CSS适配
weixin_34411563的博客
02-01 3486
一、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 适配*/ @m...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值