css 适配iphonex 与 iphone11 的写法

最新推荐文章于 2023-03-13 14:29:35 发布

KLW75

最新推荐文章于 2023-03-13 14:29:35 发布

阅读量326

点赞数

分类专栏： css 文章标签： css css3 前端

本文链接：https://blog.csdn.net/KLS_CSDN/article/details/108446698

版权

css 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

11 的

@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2)

x 的

@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

KLW75

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

解决iphone11及以上适配问题

tylls的博客

06-08

2850

解决iphoneX 适配问题前言适配之前需要了解的几个新知识安全区域env() 和 constant()如何适配第一步：设置网页在可视窗口的布局方式第二步：页面主体内容限定在安全区域内第三步：fixed 元素的适配结语前言 iPhoneX 取消了物理按键，改成底部小黑条，这一改动导致网页出现了比较尴尬的屏幕适配问题。对于网页而言，顶部（刘海部位）的适配问题浏览器已经做了处理，所以我们只需要关注底部与小黑条的适配问题即可（即常见的吸底导航、返回顶部等各种相对底部 fixed 定位的元素）。笔者通过查阅了一

CSS 网页适配 iPhoneX，就是这么简单

快乐de馒头

01-21

3297

前言 iPhoneX 取消了物理按键，改成底部小黑条，这一改动导致网页出现了比较尴尬的屏幕适配问题。对于网页而言，顶部（刘海部位）的适配问题浏览器已经做了处理，所以我们只需要关注底部与小黑条的适配问题即可（即常见的吸底导航、返回顶部等各种相对底部 fixed 定位的元素）。笔者通过查阅了一些官方文档，以及结合实际项目中的一些处理经验，整理了一套简单的适配方案分享给大家，希望对大家有所帮助，以...

参与评论您还未登录，请先登录后发表或查看评论

CSS中苹果X全面屏的适配问题解决方法

sk_yi的博客

06-08

1415

css 伪类 active 在 iphone 上不起作用的解决办法

纠缠AI的亮子

08-25

604

直接上代码： <body ontouchstart=""> </body> https://stackoverflow.com/a/8877902/3054511

10-CSS-rem适配布局

最新发布

...

03-13

3828

思考1. 页面布局文字能否随着屏幕大小变化而变化？2. 流式布局和flex布局主要针对于宽度布局，那高度如何设置？3. 怎么样让屏幕发生变化的时候元素高度和宽度等比例缩放？

css用@media适配不同尺寸的手机

mm_hello11的博客

10-03

4827

css语法为 @media mediatype and|not|only (media feature) { CSS-Code; } 一些常用的手机配置 @media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone5 */} @media only screen and (max-...

Html5移动端适配IphoneX等机型的方法

12-28

上图中，Iphonex机型在头部和底部新增了这两个区域，所以我们需要针对这类机型做些适配，方便我们的webapp的展示 h5做成的移动端页面，常见布局为头部+躯干+底部三栏模式，头部和顶部都是固定定位，躯干可里的内容...

CSS第九章移动端布局-Viewport视口/移动端适配方案

晓葉斑比

06-04

1886

Viewport视口移动端模拟器访问的网站的PC端和移动端是否用同一代码实现？Viewport视口ViewPort设置移动端适配方案1. 流式布局(百分比布局)流式布局原则2. rem布局(等比缩放布局) 移动端模拟器切换平台之后，一定要重新刷新浏览器访问的网站的PC端和移动端是否用同一代码实现？ 1.大一点的网站的PC端和移动端都是分开开发的，各有一套代码。访问淘宝网 ->后端检测当前设备 ->如果是PC端 ->www.taobao.com 访问淘宝网 ->后端检

移动端iphone手机简单兼容头部

想飞的猪的博客

03-09

473

1.iPhone的适配---安全区域(safe area) padding-top: constant(safe-area-inset-top); /* 兼容 iOS < 11.2 */ padding-top: env(safe-area-inset-top); /* 兼容 iOS >= 11.2 */ <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minim

CSS3的媒体查询(Media Queries)与移动设备显示尺寸大全

51yunOA

04-16

1958

文章目录媒体查询介绍 Media Queries具体使用一、最大宽度Max Width 二、最小宽度Min Width 三、多个Media Queries使用四、设备屏幕的输出宽度Device Width 五、iPhone4 六、iPad 七、android 八、not关键字九、only关键字十、其他媒体查询之device-aspe...

css3 transform动画导致IOS 手机层级错乱问题

weixin_42210000的博客

02-17

725

css3 层级

部分iphone机型无法实现css的animation动画效果(无效, 失效)

qq_37146616的博客

01-25

2640

部分iphone动效无效, 字体逐显样式, 字体向上移动样式

CSS样式里面的堆叠（层叠）上下文（层次顺序z-index）

李dayday

08-13

2617

看了网上很多的博客，将了关于这个层叠上下本的技术博客，然后我也自己去整理了下，我这篇关css元素的堆叠顺序写的很清楚，很有条理，很简单明了，层叠上下文的法则都总结好了，希望对大家有帮助这个属于扩展，当然你想了解技术的话，可以看看我这个关于堆叠顺序的理解！不了解的话，当然有更加简单方法是完成堆叠上下本的方法！当然这是我自然的理解，有说的不对的地方，希望你们可以指出来！大家一起交流学习，...

css高度塌陷和重叠问题

cxy_xss的博客

08-14

823

高度塌陷和重叠问题

对于iphone X 兼容性处理的css适配方法和js适配方法

热门推荐

zhaoshuang1010的专栏

12-28

3万+

1. 如果想全屏覆盖，html里面请使用 viewport-fit=cover"> ps:我的实际项目里，只在手机qq 里面去访问页面时候出现底部灰色安全区域块，可以说现在大部分公司页面都没有做兼容，包括百度，美团，京东... so html 加此属性，网页就可以全屏覆盖。 2.如果想对某个元素进行底部上移或者顶部下移可以做以下适配。注：如

iphone11 安全区域底部栏兼容性问题

ann_d的博客

03-04

2263

h5界面在嵌入钉钉后发现底部栏滚动至最下方时出现白色间隙。解决方式 1.在meta标签中加入viewport-fit=cover" <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover" name="viewport...

踩过的坑—iphone手机H5样式兼容总结

my88396的博客

05-28

1万+

对一个前端开发者来说，最煎熬的莫过于"兼容"两个字了（说到这个词朋友们是不是身体一抖），哪怕对于工作多年的老油条来讲，也不是完全了解各种场景下的兼容性处理方法。在这里我就把我在工作当中遇到的关于iphone手机h5页面的兼容性处理和大家分享一下。html,body{ -webkit-text-size-adjust: none; } // 当需要在中文版chrome浏览器中显示小...

对于iphone X 兼容性处理的css适配方法和js适配方法

abcde158308的博客

01-28

2466

转载自 zhaoshuang1010 1. 如果想全屏覆盖，html里面请使用 <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover"> ps:我的实际项目里，只在手机qq 里面去访问页面时候出现底部灰色安全区域块，可以说现在大部分公司页面都...

CSS笔记（兼容iphoneX）

KeePCoding

05-04

4525

要兼容IphoneX，尤其是使用 position: fixed;bottom: 0; 样式时，要确保底部栏处于安全区域，这篇文章讲得很仔细明白——《关于H5页面在iPhoneX适配》