fixed在IOS低版本有兼容问题

最新推荐文章于 2023-08-01 18:10:11 发布
原创 最新推荐文章于 2023-08-01 18:10:11 发布 · 455 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #css兼容

在小程序开发中，遇到低版本iOS设备上scroll-view内使用fixed定位导致无法滑动的问题。解决方法是将fixed元素与scroll-view置于同一级，避免使用fixed定位，以确保scroll-view正常工作。

在做小程序使用scroll-view时，低版本的IOS中，在scroll-view中使用fixed时会把scroll-view盖住，导致不能滑动。

解决方法时，将fixed元素和scroll-view外套一个标签，将fixed元素和scroll-view设为同级，都只有绝对定位，不要使用fixed即可。

H5-ios兼容性问题
叶小树咯
07-25 741
h5开发遇到的ios兼容性问题
前端ios兼容性问题总结
dengkangning1111的博客
09-04 2683
前端IOS兼容性问题总结 低版本版本兼容问题 具体表现：低版本ios写es6语法会报错 解决方法：直接用es5语法或者使用babel， 参考：https://www.babeljs.cn/ 高版本兼容性问题 具体表现：fixed布局会被输入框给顶起来，原因好像是失去了焦点 解决方法：1.给输入框一个onblur事件，滚到上面去; onBlur(){ window.scroll...
IOS中fixed定位兼容问题
qq_41595903的博客
10-09 950
【问题描述】页面局部存在滚动元素盒子（overflow:scroll/auto），模态弹窗被该盒子截断； 【问题原因】position:fixed在苹果产品中并没有实现相对于浏览器窗口定位。其实现的功能是相对最近允许滚动的元素定位，且不能遮罩滚动元素的兄弟元素及其所有父元素的兄弟元素； ...
ios苹果手机position：fixed的兼容性以及无法定位到全局的问题
weixin_53296753的博客
11-29 5812
首先大家知道position：fixed；这个css属性在任何环境下都有可能会被阻断，也就是无法作用于全局。所以要想我们在项目中的遮罩蒙版等作用于整个屏幕，要将其所有的父级元素css中的overflow置为visible，但是这又是不现实的。也就是说，当父级元素中有含上面几个css属性的时候，你写的模态框，透明背景等等，就不能覆盖整个屏幕了。可以试试在父级加入下面的css：那么fixed的范围就是加入这个属性的元素。ios5以上的手机确实兼容了position:fixed，简单粗暴的，用js控制下。
【CSS】ios上fixed固定定位的input输入框兼容问题
每天进步一点点, 靠近小目标一点点~
08-01 1366
使用js计算出来中间高度 contentHeight = pageHeight - searchHeight
ios固定定位fixed兼容问题
chenqie1551的博客
11-10 415
将发送的输入框固定在底部时，iOS中，输入框会随着内容上下浮动。解决方法是将内容放在一个div里面 .main{ /* main绝对定位，进行内部滚动 */ width:100%; position: absolute; top: 1px; bottom...
ios fixed兼容问题
空空的博客
04-27 1239
ios fixed 定位 可能会造成input 光标错位。解决方法：改用absolute定位；Web移动端Fixed布局的解决方案
微信小程序开发之IOS和Android兼容的问题
08-29
微信小程序开发在不同移动设备平台如IOS和Android上运行时，开发者常常会遇到一些兼容性问题。针对IOS和Android平台的兼容性问题，主要可以从以下几个方面进行理解和解决。 一、时间转换问题： 时间格式化是大多数...
html5实现输入框fixed定位在屏幕最底部兼容性
11-19
在HTML5中，实现输入框`fixed`定位在屏幕最底部的兼容性是一个常见的挑战，尤其是在面对各种设备、浏览器和输入法的差异时。这里我们将深入探讨如何解决这个问题，并提供几种可能的解决方案。 首先，问题的根源在于...
详解h5页面在不同ios设备上的问题总结
12-13
在开发H5页面时，尤其是当页面需要在iOS设备上运行时，开发者常常会遇到一些兼容性问题。本文主要总结了在不同iOS设备上，特别是嵌入到小程序Webview中的H5页面所遇到的一些典型问题及其解决方案。 1. **日期问题**...
iphone safari不支持position fixed的解决方法
09-05
最近一直在做移动web开发，开发过程中遇到了许多问题，mobile safari不支持position: fixed就是一件很头疼的事情
ios position:fixed 兼容
ordinaryboyes的博客
05-26 902
移动端开发仿app头部底部固定设置position:fixed，android2.2以上已经实现。但是在ios8以下系统，当小键盘激活时，都会出现位置浮动问题。如图： 如何解决： 查阅资料之后想到一下几种解决方法 1，使用position：absolute模拟 JavaScript">     window.onscroll=function(){
ios fixed兼容性问题
shine_scp的博客
10-28 1092
iOS下的 Fixed + Input 调用键盘的时候空间悬空 原理是：页面本来只有一屏，顶部与底部与内容部分。顶部底部fixed，小键盘弹起是将整个视口改变，所以中间增加scroll不会影响调起。但是还是存在一个bug：ios下滑动到底部以后不会停止，可以继续往下滑动漏出微信背景。待解决 html如下： class="layout-fixed">
移动web开发中 ios不兼容fixed
nobug12138的博客
04-13 568
style=”position:fixed;top:38px;bottom:38px;width:100%;overflow:scroll;background-color:#BABABA;” body主体部分添加以上样式
IOS系统不兼容position: fixed；属性的解决方案
weixin_46246967的博客
05-02 608
IOS系统不兼容position: fixed;属性的解决方案
安卓的position：fixed正常；但IOS有问题，因为IOS不支持fixed
weixin_45392559的博客
08-15 1287
安卓的position：fixed正常；但IOS有问题，因为IOS不支持fixed
小技巧css解决移动端ios不兼容position:fixed属性，无需插件
热门推荐
小白努力走
10-15 15万+
ios运用position:fixed会错位，css一行样式巧妙解决定位问题。
fixed定位兼容问题
samscat的博客
11-10 922
1.问题描述：一个fixed定位的导航栏，安卓和PC端可以显示，但是iphone上面却无法显示。 2.问题查找：首先排除js的问题，因为iPhone能触发该点击事件也能对类“open”进行操作判断，经过查找最后发现我在最外包裹的层上写了一个“overflow:hidden”,我去掉了它，然后终于能显示了。 3.结论：安卓和pc端浏览器上overflow:hidden对于fiexd定位的层无效，而i...
ios和安卓的兼容问题
最新发布
09-10
在前端开发中，iOS和安卓系统存在多种兼容性问题，主要分为JavaScript、CSS和HTML方面： - **JavaScript兼容问题**：包括iOS日期的兼容、iOS的beforeunload事件的兼容、Android下点击input框键盘将页面顶起、iOS点击input框键盘将底部按钮顶起（正常需隐藏底部按钮）、iOS键盘收起页面底部出现空白问题，以及Android和iOS下表单的input事件和change事件的差异等 [^3]。 - **CSS兼容问题**：有iOS下input框聚焦时出现outline或者阴影、Android和iOS下设置input框禁止选择内容、iOS改变input框的默认placeholder属性样式、iOS下input框输入的内容偏上、Android下line - height和height的兼容、iOS下解决 “input按钮” 样式会被默认样式覆盖的问题、iOS下阻止图片在微信里被点击放大、Android下margin - top失效、Android下页面出现横向滚动条（iOS正常）、Android下给页面设置fixed固定定位无效（iOS正常）、iOS适配底部小横条（Android机上也可调出）、iOS中字体加粗无效（Android正常）、iOS下拉页面时自定义的头部导航栏消失等 [^3]。 - **HTML兼容问题**：例如iOS下会将数字当成电话号码，导致变色 [^3]。 此外，在系统层面，安卓系统新版本发布后有兼容过渡期，需解决旧版应用在新系统上的兼容性问题，开发者要进行应用兼容性测试、修复和改进，以确保应用流畅运行。移动端常见的兼容性问题如滚动条卡顿、圆角bug、input样式覆盖等也需要相应解决方案来优化用户体验 [^2]。 ```javascript // 判断是安卓还是IOS的方法 // 获取浏览器的userAgent，并转化为小写 var ua = navigator.userAgent.toLowerCase(); // 判断是否是苹果手机，是则是true var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1); if (isIos) { // 做苹果手机兼容 } else { // 做安卓手机兼容 } ```
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值