當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發布時間：2024/5/14 编程问答 36 豆豆

生活随笔收集整理的這篇文章主要介紹了苹果手机微信小程序fixed失效问题记录小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

遇到個奇怪的問題，在微信小程序頁面中添加一個底部固定按鈕，設置樣式為fixed，結果在iphone11上會失效，即按鈕會跟著頁面布局移動，修改過程在此記錄一下，遇到相同問題的朋友可以看下是否你也是相同問題。

手機版本：iphone 11?

重現代碼：

index.wxml文件內容：

index.wxss文件內容

.content{width:100%;height:3000rpxbackground: #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:3000rpxbackground: #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的介紹，希望對大家有所幫助。

總結

以上是生活随笔為你收集整理的苹果手机微信小程序fixed失效问题记录的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：『phphot』【SD2.0大会】SD2
下一篇： html的概念及扩展名