如何兼容苹果手机inphoneX（底部横杠）

最新推荐文章于 2023-02-23 17:52:52 发布

我的ID是小白

最新推荐文章于 2023-02-23 17:52:52 发布

阅读量319

点赞数

分类专栏：前端小问题

本文链接：https://blog.youkuaiyun.com/qq_43174643/article/details/116159362

版权

前端小问题专栏收录该内容

10 篇文章

订阅专栏

本文介绍了如何在HTML中添加meta标签来适配iOS设备的安全区域，并提供了解决使用fixed定位且bottom=0时底部被遮挡的问题，通过添加padding-bottom兼容不同iOS版本，确保内容不被 notch 或安全区域影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//html中添加
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,viewport-fit=cover">

在使用fixed的地方并且bottom=0的地方新增：

 padding-bottom: constant(safe-area-inset-bottom); // 兼容 IOS<11.2/
  padding-bottom: env(safe-area-inset-bottom); // 兼容 IOS>11.2/

亲测，有效

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

我的ID是小白

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

iPhoneX样式适配兼容问题

SANJIN0527_的博客

12-30

781

问题出处：在我们进行定位时要距离底部tab 100px 在安卓手机距离底部达到了我们的预期效果但苹果手机没有这时候我们就要写一下样式的适配 1、网页在可视窗口的布局方式 viweport-fit 属性： iOS11 新增特性，苹果公司为了适配 iPhoneX 对现有 viewport meta 标签的一个扩展，用于设置网页在可视窗口的布局方式，可设置三个值： contain: 可视窗口完全包含网页内容 cover：网页内容完全覆盖可视窗口 auto：默认值，跟 contain 表现一致更详细说

uniapp 总计涵盖(html vue css js)

jack_rose_me的博客

03-04

1738

uniapp 总计涵盖(html vue css js)

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

iphoneX Home Bar 类似苹果底部操作条

12-07

苹果手机兼容底部悬浮html,IphoneX底部适配的实现

weixin_33255691的博客

06-18

529

1.判断是否是IPhoneX手机let isIphone = /iphone/gi.test(window.navigator.userAgent)let windowW = window.screen.widthlet windowH = window.screen.heightlet pixelRatio = window.devicePixelRatiolet isIPhoneX = isI...

css兼容iphone小黑条

星星月亮的博客

06-30

1193

兼容

兼容iphonex手机底部的横线处理

weixin_43824675的博客

11-26

927

/* 兼容iPhoneX */ padding-bottom: 0; padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);

Inphonex项目API开发与部署指南

资源摘要信息:"Back-End-Recruiting-Test项目是一个与Inphonex API相关的后端开发测试项目，涉及到应用智能和业务规则的API开发与集成。本项目采用Git进行版本控制，使用Docker容器化技术进行环境搭建，涉及到PHP...

Linksys PAP2T Phone Adapter

06-29

Linksys PAP2T的优势在于其便捷性和兼容性。它可以直接插入家庭路由器或网关，无需专业知识即可进行基本设置。而且，由于每个电话端口可以独立工作，你可以在同一时间拥有两个电话号码，如同拥有两条电话线，这对于...

RingByName Click2Call-crx插件

03-22

RingByName Click2Call 特征： ... - 只需在Click2Call下拉菜单中输入任意数字即可发起呼叫。...由InPhonex系统和开发部门开发，特别感谢Marcel Araujo和Lucas Rosa。支持语言:English,español,português (Brasil)

canvas 手写签名微信小程序

qq_42897782的博客

07-28

403

很多时候，程序中需要用到签名的功能，附上源码（微信小程序） .wxml <view class="canvasBox"> <view class="canvasTitle">请签名：</view> <view class="canvasContent"> <view class="singatureTag">签名区域</view> <canvas style="w...

手机聊天下划线生成器，支持IOS、安卓手机

01-30

而这种带有下划线的文字，iOS、Android 等大多手机系统均能正常显示，不仅可以用作公众号标题，微信群昵称、个性签名、日常聊天、发朋友圈等全都适用。

仿IOS的scrollview

04-17

仿IOS的弹性scrollview,别人的资源，感觉不错。

android 仿iphone左右滑块开关

01-23

android 仿iphone左右滑块开关，这个是网上找的别的一个组件提取而来，不同于简单的自定义控件，里面是应用了theme来设置一些属性，这也符合更高级的设计理念。放在这里是以免遗忘。有需求的就随便下载吧！

iOS 底部工具条

05-19

模仿系统底部弹出菜单工具框,动画实现向上推出,向下隐藏底部工具条的简单实现

IOS 开发之UILabel 或者 UIButton加下划线链接

01-20

IOS 开发之UILabel 或者 UIButton加下划线链接本文主要介绍了IOS中 UILable及UIButton的带下划线链接的实现方法及附有源码下载，大家开发IOS 应用有需要的可以参考下：方法一： NSMutableAttributedString *str = [[NSMutableAttributedString alloc] initWithString:@查看所有中奖记录]; NSRange strRange = {0,[str length]}; [str addAttribute:NSUnderlineStyleAttributeName

安卓底部横条_用这个 APP 就可以在安卓使用 iOS 的控制中心

weixin_35531726的博客

01-16

8819

用安卓手机的小伙伴们想体验一下 iOS 系统的「控制中心」吗？小姐姐有一个好玩的应用，可以让小伙伴们体验一把安卓手机显示 iOS 系统「控制中心」的感觉。应用介绍首次打开应用时，会提示你需要打开「显示悬浮窗」，打开后进入如下图：点击「大小」，把「位置」改为「底部」，当然，显示位置小伙伴们可以根据自己的喜好去更改。在「高级选择」内，你可以拖动进度条去更改「控制中心横条」的颜色与...

uniapp h5 tabBar兼容IOS手机底部黑线

码农键盘上的梦

02-23

3294

因为我这边的tabbar导航栏是自己写的，不是用的uniapp自带的，所以如果遇到IOS手机底部有黑线的这种，需要将tabbar导航栏的高度调整一下才可以。app底部的tabbar 导航栏如果遇到IOS手机则会出现问题。一、pages.json文件中添加tarBar。[补充2：在app中$route找不到的问题]补充1：自定义switchTab跳转方法。uniapp自定义tabBar方案。二、把原生的tabBar隐藏起来。三、自定义一个tabBar组件。

解决兼容苹果手机底部黑线的问题

DLY_66L14的博客

08-06

887

解决兼容苹果手机底部黑线的问题。