如何解决IOS系统下fixed定位布局失败的兼容问题

最新推荐文章于 2023-09-05 09:30:07 发布
最新推荐文章于 2023-09-05 09:30:07 发布
阅读量2.2k 收藏 2
点赞数
分类专栏： css 文章标签： IOS web前端 html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43846733/article/details/89332572
版权

    在开发移动端页面特别是各种程序封装的h5APP中，我们常常会需要加上下导航栏的功能，在移动端和PC端用position:fixed就能解决，但是实际过程中在IOS端常常会遇到不兼容的问题，比如页面滑到一半置顶就消失，在网络上找了很多方法，都不是很实用，于是在研究了一下。
  简单来说,就是用absolute定位来代替fixed定位。先用一个一个长宽为全屏幕的容器包裹顶部置顶和下面滑动部分，代码如下

<html>
  <div class="box"> 
    <div class="top"></div>//这里放导航栏
最低0.47元/天 解锁文章
小杨吔包
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ios系统针对底部input设置fixed的输入框不兼容问题
qq_32601115的博客
11-14 730
标题：工作一年遇过的首个大坑—ios系统针对底部input设置fixed的输入框不兼容问题 1、页面要求如图 2、针对fixed不兼容可以使用下面方法：// CSS .scrollWrapper { position: absolute; left: 0; right: 0; bottom: 0; top:0; } bottomInput {
解决移动端 ios 系统键盘遮挡的问题
01-20
综上所述，解决移动端iOS系统键盘遮挡问题的方法多种多样，关键在于选择适合项目需求的方案，并确保在不同版本的iOS系统上都能正常工作。开发者应当注意兼容性测试，因为不同的iOS版本可能会有不同的表现。同时，...
关于{position:fixed}
斗战圣Q
12-17 1313
<br /><!-- DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" --> <html> <head> <mce:style type="text/css"><!-- #fixed{position:fixed;top:5em;right:0;} --></mce:style><style type="t
IOS系统不兼容position: fixed;属性的解决方案
weixin_30249203的博客
08-04 1045
position: fixed;属性在IOS系统手机上会有很明显的抖动，解决方式： 只需要在中间部分外层div添加css样式position:fixed;top:50px; bottom:50px;overflow:scroll;就可以实现效果，无需插件。 让顶部和底部固定不动的DIV和中间内容部分的DIV脱离开的方法就是让中间部分超出内容出现滚动条。 转载于:https://www....
h5开发网站-css实现页面的背景固定定位；以及安卓ios手机端兼容问题
最新发布
weixin_48596030的博客
09-05 1103
在页面滚动时，背景图片保持不变，而不是跟随滚动。
ios对于fixed属性不兼容的解决方案
Zhooson的博客
07-22 1万+
ios对于fixed属性不兼容的解决方案
ios苹果手机position：fixed的兼容性以及无法定位到全局的问题
weixin_53296753的博客
11-29 4390
首先大家知道position：fixed；这个css属性在任何环境下都有可能会被阻断，也就是无法作用于全局。所以要想我们在项目中的遮罩蒙版等作用于整个屏幕，要将其所有的父级元素css中的overflow置为visible，但是这又是不现实的。也就是说，当父级元素中有含上面几个css属性的时候，你写的模态框，透明背景等等，就不能覆盖整个屏幕了。可以试试在父级加入下面的css：那么fixed的范围就是加入这个属性的元素。ios5以上的手机确实兼容了position:fixed，简单粗暴的，用js控制下。
html5实现输入框fixed定位在屏幕最底部兼容性
11-19
在iOS设备上，搜狗输入法的实现方式与系统输入法不同，它会覆盖在页面上，导致输入框被遮挡。为了解决这个问题，我们需要额外的判断逻辑来处理这种情况，可能需要监听输入框的`focus`事件并调整页面样式以确保输入框...
详解h5页面在不同ios设备上的问题总结
12-13
为了解决这个问题，可以考虑放弃使用`fixed`布局，转而采用`flex`布局，它通常能提供更好的兼容性和用户体验。如果必须使用`absolute`定位，可参照光标偏移的解决方案来调整布局。 尽管上述方法可以解决一些常见的...
position_fixed
12-13
总的来说，`position_fixed`主题涵盖了网页设计中的固定定位技术，特别是如何在不支持`position: fixed;`的旧版浏览器（如IE6）中实现相同效果的策略。这包括使用JavaScript补丁、条件注释以及可能的CSS hack，确保...
可能这些是你想要的H5软键盘兼容方案(小结)
12-14
总的来说，处理H5软键盘兼容问题需要对不同平台的特性有深入理解，以及熟练运用JavaScript和CSS技术。在实际项目中，可以创建一个跨平台的软键盘管理模块，统一处理键盘事件、高度计算和页面布局调整，以实现输入框...
小技巧css解决移动端ios不兼容position:fixed属性，无需插件
热门推荐
小白努力走
10-15 15万+
ios运用position:fixed会错位，css一行样式巧妙解决定位问题。
解决ios4下不支持position:fixed的问题
front_end_fan
02-06 511
前言： 参考1 参考2 参考3 自以为解决了所有IOS系统关于position:fixed的所有问题，看来还是没有，特在此补充！！！ 一、注意：不要在 fixed 元素中使用 input / textarea 元素。 在 android 手机下 fixed 表现要比 iOS 更好，软键盘弹出时，不会影响fixed元素定位； 还是保留之前的态度，依然不推荐在 Android下使用 iS
fixed在IOS低版本有兼容问题
The_Sake的博客
12-24 305
在做小程序使用scroll-view时，低版本的IOS中，在scroll-view中使用fixed时会把scroll-view盖住，导致不能滑动。 解决方法时，将fixed元素和scroll-view外套一个标签，将fixed元素和scroll-view设为同级，都只有绝对定位，不要使用fixed即可。...
前端APP开发IOS定位兼容问题解决方案
lh_seckill的博客
08-23 1188
在IOS真机运行时 , 足迹商品过多 , 页面出现滑动 , 会导致头部跟随页面滑动闪烁 , 体验极差
iOS平台WebView中元素fixed失效的问题
weixin_33842328的博客
12-01 548
1、移动端并不会都使用原生开发，有时候会简单粗暴地在Android和iOS中提供一个activity或viewController，然后在里面显示一个满屏的WebView，在WebView里加载某一个网页的内容即可，这个要加载的网页就可以交给其他人去开发了。2、一般而言，如果网页布局简单，没有使用浮动定位等属性的话，基本不会出问题。但好死不死，很多时候用个position:fixed之类的把输入框...
ios系统和某些移动端background-attachment:fixed不兼容性
WEB_HW
02-18 1546
ios系统和某些移动端background-attachment:fixed不兼容性，没有任何效果，但可以hack一下就可以了，代码如下:ps：想在哪个标签加背景，可以在它class后:before.body:before { content: ' '; position: fixed; z-index: -1; top: 0; right: 0; bottom: 0;
使用background-attachment：fixed固定背景图以及ios系统不兼容网页背景图片固定的解决方案
春风十里柔情的博客
10-15 2307
解决办法： body{ width: 100%; background-image:url('url); background-repeat: no-repeat; background-position: center; background-attachment: fixed; z-index: -1; } 兼容性： body:before { content: ’ '; position: ...
移动端web开发之坑--ios下的fixed问题
screaming_color的博客
12-02 2821
话说前几天接到了一个改bug的任务： 【问题】ios用户进入页面时底部悬浮按钮不显示，需要向下滑动，停止滑动后才会显示。【先说一下项目的结构吧】 main.html scripts – stat.js – main.js①由于底部按钮是通过平台配置的，故html中会生成相应的配置对象，只有会通过js遍历后插入页面节点中； ②stat.js 是一个到达页面底部才会被触发，并且只触发一次
如何解决IOS 下固定定位fixed 失效问题？
06-10
在 iOS 下，当页面出现滚动时，fixed 定位的元素会失效，这是因为 iOS 下的 Safari 浏览器默认会为滚动的元素添加一个滚动条，而 fixed 定位的元素会脱离文档流，因此会相对于整个文档进行定位，而不是相对于滚动的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值