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

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

手机版本：iphone 11 

重现代码：

index.wxml文件内容：

测试按钮

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、使用场景为当浏览器页面滚动时，元素的位置不会改变。

固定定位的特点

• 以浏览器的可视窗口为参考点的移动元素。

• 和父元素无关。

• 不要随滚动条滚动。

• 固定定位不占用原位置。固定定位也是脱标的。

版心盒子

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