苹果手机微信小程序fixed失效问题记录

KV_T

已于 2023-06-15 10:31:42 修改

阅读量1.8k

点赞数

分类专栏：微信小程序文章标签：微信小程序小程序

于 2023-06-13 15:04:06 首次发布

本文链接：https://blog.csdn.net/c5211314963/article/details/131188268

版权

微信小程序专栏收录该内容

6 篇文章 0 订阅

订阅专栏

遇到个奇怪的问题，在微信小程序页面中添加一个底部固定按钮，设置样式为fixed，结果在iphone11上会失效，即按钮会跟着页面布局移动，修改过程在此记录一下，遇到相同问题的朋友可以看下是否你也是相同问题。

手机版本：iphone 11

重现代码：

index.wxml文件内容：

<view class="content">

</view>
<view class="btn">测试按钮</view>

index.wxss文件内容

.content{
   width:100%;
   height:3000rpx
   background: #f7f7f7;
}

.btn{
    width: 560rpx;
    height: 80rpx;
    background: #3080DB;
    border-radius: 40rpx;
    text-align: center;
    line-height: 80rpx;
    font-size: 28rpx;
    color: #FFFFFF;
    text-align: center;
    position: fixed;
    bottom: 68rpx;
    z-index: 2;
    margin: 0 auto;
}

问题解决方案：

在index.wxss中增加如下代码，最终代码如下：

/** 这是增加的代码 **/
page{
    width: 100vw;
    height: 100vh;
    position: relative;
}


.content{
   width:100%;
   height:3000rpx
   background: #f7f7f7;
}

.btn{
    width: 560rpx;
    height: 80rpx;
    background: #3080DB;
    border-radius: 40rpx;
    text-align: center;
    line-height: 80rpx;
    font-size: 28rpx;
    color: #FFFFFF;
    text-align: center;
    position: fixed;
    bottom: 68rpx;
    z-index: 2;
    margin: 0 auto;
}

iphone手机有时候比较怪异，开发工具也没有个iphone11的模拟器，所以出现问题只能各种试，在此记录一下

如果本文对您有帮助还请动手点个赞，以帮助更多人作为参考。

下面对css fixed进行以下知识扩展：

css中固定定位fixed是什么？

说明

1、固定定位是元素固定在浏览器可视区的位置。固定定位也可以算是一种特殊的绝对定位。

2、使用场景为当浏览器页面滚动时，元素的位置不会改变。

固定定位的特点

以浏览器的可视窗口为参考点的移动元素。
和父元素无关。
不要随滚动条滚动。
固定定位不占用原位置。固定定位也是脱标的。

<!DOCTYPE html>

<html>

<head>

<title></title>

<style type="text/css">

.w {

width: 800px;

height: 1400px;

margin: 0 auto;

background-color: pink;

}

.fixed {

position: fixed;

/*1,走浏览器宽度的一半*/

left: 50%;

/*2，走版心盒子的一半，想宽一点可以加多一点px*/

margin-left: 400px;

width: 50px;

height: 150px;

background-color: skyblue;

}

</style>

</head>

<body>

<div>

</div>

<div>

版心盒子

</div>

</body>

</html>

以上就是css中固定定位fixed的介绍，希望对大家有所帮助。