遇到個奇怪的問題，在微信小程序頁面中添加一個底部固定按鈕，設(shè)置樣式為fixed，結(jié)果在iphone11上會失效，即按鈕會跟著頁面布局移動，修改過程在此記錄一下，遇到相同問題的朋友可以看下是否你也是相同問題。
手機版本：iphone 11?
重現(xiàn)代碼：
index.wxml文件內(nèi)容：
<view class="content">
</view>
<view class="btn">測試按鈕</view>index.wxss文件內(nèi)容
.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手機有時候比較怪異，開發(fā)工具也沒有個iphone11的模擬器，所以出現(xiàn)問題只能各種試，在此記錄一下
如果本文對您有幫助還請動手點個贊，以幫助更多人作為參考。
下面對css fixed進行以下知識擴展：
css中固定定位fixed是什么？
說明
1、固定定位是元素固定在瀏覽器可視區(qū)的位置。固定定位也可以算是一種特殊的絕對定位。
2、使用場景為當瀏覽器頁面滾動時，元素的位置不會改變。
固定定位的特點
-
以瀏覽器的可視窗口為參考點的移動元素。
-
和父元素無關(guān)。
-
不要隨滾動條滾動。
-
固定定位不占用原位置。固定定位也是脫標的。文章來源：http://www.zghlxwxcb.cn/news/detail-491710.html
<!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的介紹，希望對大家有所幫助。文章來源地址http://www.zghlxwxcb.cn/news/detail-491710.html
到了這里，關(guān)于蘋果手機微信小程序fixed失效問題記錄的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
