移动端H5适配iphoneX底部栏解决办法

最新推荐文章于 2023-06-09 20:32:17 发布

一剑长歌

最新推荐文章于 2023-06-09 20:32:17 发布

阅读量1.8k

点赞数

分类专栏： Vue 文章标签： vue.js html css3

本文链接：https://blog.youkuaiyun.com/weixin_41395548/article/details/121329218

版权

这篇博客介绍了在Vue项目中解决底部栏适配问题的方法，通过设置meta标签和CSS的@supports规则，确保内容在不同设备上正确显示。同时，提醒了在使用此方法时要注意避免同时使用id选择器和固定高度，内容应由padding撑起。

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

1、meta标签放入viewport-fit=cover

<meta name="viewport" content="width=device-width...... viewport-fit=cover">

2、css设置

@supports (bottom: env(safe-area-inset-bottom)){
   
    body,
    .footer（底部栏）{
   
        padding-bottom: constant

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

一剑长歌

关注关注

0
点赞
踩
2

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

html5底部导航图标制作,如何做好UI底部导航栏图标设计

weixin_42332497的博客

06-29

2140

原标题：如何做好UI底部导航栏图标设计如何做好UI底部导航栏图标设计?图标在产品中的应用非常重要，不同位置的图标有不同的设计思路。本文将从产品和设计两个角度对底部导航栏的图标进行分析。UI设计创新技能层出不穷，UI设计满足着形形色色各种垂直化的需求,在设计方面大家也是想方设法去做一些创新,希望自己能够在各种应用中脱颖而出,那么如何做好UI底部导航栏图标设计呐？今天就进行简单的说明。一、底部导航栏图...

H5移动端网页适配iPhone x/iPhone xr/iPhone 11pro/iPhone 11/iPhone 12 机型底部小黑条

chocolate_nan的博客

11-09

2982

iPhone x/iPhone xr/iPhone 11pro/iPhone 11/iPhone 12 取消了物理按键，改成底部小黑条，这一改动导致网页出现了比较尴尬的屏幕适配问题。对于网页而言，顶部（刘海部位）的适配问题浏览器已经做了处理，所以我们只需要关注底部与小黑条的适配问题即可（即常见的吸底导航、返回顶部等各种相对底部 fixed 定位的元素）。安全区域指的是一个可视窗口范围，处于安全区域的内容不受圆角（corners）、齐刘海（sensor housing）、小黑条（Home Indicator

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

H5网页去除苹果手机底部白边

a_靖的博客

08-03

3138

先看去除前后的效果对比在网页的head里面放以下代码 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no, viewport-fit=cover" />

H5移动端适配iPhone X/XS/XS Max底部导航栏+底部栏

xiaodouxuan11的博客

10-21

3161

博主是用uniapp开发的一个商城，本身就做了tabbar兼容；打包上线后，发现在其他浏览器下都可以正常显示，唯独微信浏览器，我真的是***；如下就是解决方案 viewport-fit=cover 这个很重要，它可以帮你在微信浏览器下适配，不加这个会被底部的横杠挡住噢~ <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-sc

h5 底部按钮兼容 iPhone X（解决底部横杠遮挡问题）

热门推荐

黄河爱浪的博客-专注CSS,jQuery,uni-app领域

07-09

1万+

方法一：JS判断 function isIphoneX(){ if(/iphone/gi.test(window.navigator.userAgent)){ /* iPhone X、iPhone XS */ var x=(window.screen.width === 375 && window.screen.height === 81...

前端系列——与众不同的移动端底部固定栏 fixed、absolute 兼容 iOS 和 Android 方案...

weixin_33795743的博客

12-06

1111

相信我，我分享的和你在其他博客上看到的终极方案是如此的与众不同！做过移动端开发的同学，对底部DOM定位出现的各种奇葩情况已经深恶痛绝了吧，底部DOM设置不同的position，在Android和ios上表现都不一样。为了兼容Android和ios，很多人都煞费苦心，也包括我。打开你做的H5，尤其是在微信上打开看看，是不是觉得很恶心，...

移动端H5-iPhone安全距离适配

TeroZhang的博客

12-27

2687

安全区域？安全区域指的是一个可视窗口范围，处于安全区域的内容不受圆角（corners）、齐刘海（sensor housing）、小黑条（Home Indicator）影响，如下图蓝色区域：也就是说，我们要做好适配，必须保证页面可视、可操作区域是在安全区域内。更详细说明，参考文档：Human Interface Guidelines - iPhoneX viewport-fit iOS11 新增特性，苹果公司为了适配 iPhoneX 对现有 viewport meta 标签的一个扩展，用于设置网页在可

钉钉应用中H5开发适配iphonex

snailmar的博客

07-24

2433

钉钉容器中开发H5应用时适配iphonex 首先要了解iphonex屏幕尺寸的一些知识,可以参考H5页面WebView在Iphonex的适配,有了对iphonex屏幕的基本认识后,适配就相对简单一些了. 盗图一张: bottom部分fixed定位,底部会造成镂空,此时我们在viewport中加入viewport-fit=cover,html和body设置高度100%,可以将bottom部分下移到...

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

12-28

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

vue h5 项目适配ios问题

shiyutim

11-15

2547

vue h5项目适配ios的问题 h5项目在安卓上运行正常，但是在ios上就出现问题 1适配iphoneX以上型号底部栏遮挡的问题 @media (min-device-height: 810px) { padding-bottom: .5rem; } 2ios页面缩放问题在index.html页面<head>标签里面加入如下<meta> <meta na...

H5适配iphoneX底部

yao_1063066968的博客

09-28

1022

H5适配iphoneX底部两步骤第一步：设置网页在可视窗口的布局方式在index.html中设置meta属性,在content下设置关键值 viewport-fit=cover，使得页面内容完全覆盖整个窗口 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cove

移动端H5适配iphoneX底部栏，css快速解决方案

05-19

2552

1、meta标签放入viewport-fit=cover <meta name="viewport" content="width=device-width...... viewport-fit=cover"> 2、css设置(不要忘记将底部栏放上“footer”这个class类名) @supports (bottom: env(safe-area-inset-bottom)){ body, .footer（底部栏）{ padding-bottom: const

h5页面在iphone手机上底部会有留白解决办法

dss0225的博客

05-21

3871

在meta viewport标签里加属性：viewport-fit=cover； <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no, viewport-fit=cover" />

vue跳转新页面后回到顶部

iCrazyTimor的博客

11-29

4146

第一种方法:main.js router.afterEach((to,from,next) => { window.scrollTo(0,0); }); 第二种方法：　在创建router实例时，做如下的配置　savedPosition当且仅当通过浏览器的前进/后退按钮触发时才可用 scrollBehavior(to, from, savedPosition) { if ...

vue项目移动端苹果底部黑线遮挡自适配的问题