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

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

手机版本：iphone 11

重现代码：

index.wxml文件内容：

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

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失效问题记录相关推荐

iphone/苹果手机微信小程序真机调试网络不通网络请求失败
问题问题:iphone/苹果手机微信小程序真机调试网络请求失败,可以确定的是,真机和开发工具所在电脑肯定是在一个网段的,把蜂窝数据都关了,只保留了WIFI,还是请求不通, 解决最终参考微信 ...
EasyAR+微信小程序识别图片开发记录
EasyAR+微信小程序识别图片开发记录所需数据业务关系示例代码总结所需数据 //小程序>appid AppId:***** //EasyAR> ApiKey:**** APIS ...
微信小程序组件库开发记录
微信小程序组件库开发记录背景前言技术选型环境搭建安装 gulp 将`scss`编译为`wxss` 压缩`wxml`,`js`,`json`文件和图片拷贝文件到另一个目录删除目录整合创 ...
微信小程序按钮失效的几大原因
微信小程序按钮失效的几大原因(里面有大坑) 最近在学习小程序的开发,边学习边敲代码,发现设置了按钮事件后页面就是跳转不成功,也没有报错,先将页面跳转三种方式列出供大家参考: wx.navigateTo ...
微信小程序开发采坑记录1
问题1: 在微信小程序开发过程中,在获取userinfo或其他异步处理函数的过程中采用this碰到一些问题,问题如下: 我的login的success回调函数如下: success: function ...
uniapp 开发H5打包微信小程序样式失效的解决之道
使用uniapp开发H5,样式已经按照UI设计稿全部实现.但是在打包微信小程序调试的时候,遇到很多样式失效的问题.问了度娘很久,并没有完全解决样式失效的问题.于是自己按照从度娘上查到的方法去进行组合尝 ...
微信小程序获取的语言列表统计，微信小程序getSystemInfo获取的各种语言都叫什么？微信小程序国际化|多语言版本获取微信小程序语言大全【记录】
微信小程序要做国际化,需通过 wx.getSystemInfo 获取到当前使用的语言,来切换不同的语言包,或许是我没找对地方?查了一下微信手册上没有这个标准语言对照表或者记录啥的,只能自己挨个儿获取一 ...
微信小程序实现：月经记录与预测显示
要在微信小程序中实现对女性月经的记录和预测,可以按照以下步骤进行: 设计界面:设计一个简洁易用的界面,包含记录周期开始日期.结束日期等必要信息,并提供可视化数据分析功能. 数据存储:建立数据库来存储用 ...
一次微信小程序的问题跟踪记录
精选30+云产品,助力企业轻松上云!>>> 本次微信小程序排查问题的过程中尝试的可能问题如下(安卓系统的手机通过部分4G网络运营商提供的流量访问 https://api.xxx.co ...

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

问题解决方案：

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

最新文章

热门文章