移动端适配兼容

编程入门 行业动态 更新时间:2024-10-22 13:56:41

移动<a href=https://www.elefans.com/category/jswz/34/1688686.html style=端适配兼容"/>

移动端适配兼容

<meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" /><!-- 开启顶部安全区适配 --><van-nav-bar safe-area-inset-top /><!-- 开启底部安全区适配 --><van-number-keyboard safe-area-inset-bottom />

然后在样式公共配置页:添加constant(),env() ,一定要按顺序来

html,
body,
#app {font-family: PingFang SC, Avenir, Helvetica, Arial, sans-serif;width: 100%;min-height: 100%;font-size: 26px;background: #f4f4f4;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;padding-bottom: constant(safe-area-inset-bottom);padding-bottom: env(safe-area-inset-bottom);
}

还要在fixed 的 footer 加上那俩个属性,且要加上背景色,不要回镂空,透明

更多推荐

移动端适配兼容

本文发布于:2024-02-27 12:57:31,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1706614.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:端适配

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!