ios 对 fixed

2024-11-08

ios下,对于position:fixed支持不完美的额解决方案

ios下,当有文本框时,会调用输入法,而这个时候,定位(fixed)在底部的东西,就会被弹上例,离底部有段距离,这算是个坑了. 我的解决方案是这样的. 除了定位在底部的元素外,用一个大div把其他元素都包围起来,然后给样式,这个样子. .publish-main{ position: absolute; top:; bottom: 43px; overflow: scroll; left:; right:; } 好了问题完美解决了.

移动端踩坑之旅-ios下fixed、软键盘相关问题总结

最近一个项目掉进了移动端的大坑,包括ios下fixed布局,h5唤起键盘等问题,作为一个B端程序员,弱项就是浏览器的兼容性和移动端的适配(毕竟我们可以要求使用chrome),还好这次让我学习了一下相关知识.让我们一起来看一下我怎么挣扎出这个大坑的. 一.背景先看一下要做什么,也就是一个文章评论的版块,下面依次有输入框,点赞,收藏等 .大概长下面这个样子: 要求也很常规,吸底,输入评论提交.那么上来就输代码吧. 二.ios下fixed布局关于这种吸底操作,上来就直接选用fixed了,这种场景舍

ios position:fixed 上滑下拉抖动

ios position:fixed 上滑下拉抖动最近呢遇到一个ios的兼容问题,界面是需要一个头底部的固定的效果,用的position:fixed定位布局,写完测试发现安卓手机正常的,按时ios上会出现上滑或者下拉的时候头部或者底部被带下来,然后过一会自己在滑上去,感觉很卡顿,感官很不好,最后发现是position:fixed的兼容问题百度找了两个方案分别用了一下方案一 transform: translateZ(0); -webkit-transform: translateZ(0);

ios下fixed回复框bug的解决方案

前几天做一个移动端的页面,要加个像微信那样附着在底部的回复框,按照做PC端网页的思路,首先是用fixed,在安卓上测了一下是好的,结果到朋友的iphone6p上就不行了,点击输入框之后它总会跳到屏幕中间去. 后来才知道这是ios下一个普遍的bug,所以我决定把原因和解决方案整理一下,以方便后人. 网上有的人说用那个iscroll.js来解决,不过那样会出现很多样式上的冲突,而且为了一个fixed的bug就动用一个js,未免有点大材小用了. 原因 ios下面,软键盘唤起后,页面的 fixed 元素

IOS系统对fixed定位支持不好的解决方法

问题: IOS 中所有浏览器,当页面上的输入框获得焦点时,呼出键盘. 页面底部的导航栏(position:fixed)会被键盘顶到页面的中间. 而当输入框失去焦点时,导航栏停留在页面中间,造成页面错乱. 原因: IOS系统,对position:fixed支持不好. 解决: 输入框失去焦点时,让页面滚动1px. 代码: $(function(){ // 输入框事件绑定 $('input').on('focus', function () { setTimeout(function () { $('

移动端ios 输入框fixed固定在底部焦点时乱跳加遮盖问题的解决转自zhangyunling 加个人项目解决方案

如果您有过移动端的开发经验,那么您是否碰到过这样的问题,一个页面有输入框,当这个输入框聚焦时,输入框在IOS下,被移动到手机屏幕的当中去了,而在Android端,有些浏览器的输入框,会被键盘盖住. 1:前言接下来就以最常见的顶部和底部固定输入框来看一下,问题的来源,以及折中的解决方案输入区域,在移动端基本上,只用于三种情况 1:固定在顶部的 2:固定在底部的 3:在文档流中的我们这里,首先以固定在顶部和底部的为例,来看看它的一些表现. 而这里的问题展示,也是通过一些示例来展示,而在每个示例

ios中fixed元素在滚动布局中的延时渲染问题

在之前做的一个demo中,有个视图是内滚动的,里边有个bar用了fixed,不是fixed在最外层视图的顶部和底部,在微信/safari/chrome/其他浏览器app上都没出现问题. 然后今天,我把demo放在拉勾网的简历的一个链接中,在拉勾网app里面点开,发现一个问题: 上下滚动的时候,设置了position:fixed的元素,在ios的-webkit-overflow-scrolling:touch机制下,产生了fixed的元素跟随内容一起滚动的问题. 此时fixed元素的表现就和pos

iOS 随机数(Fixed)

ios 有如下三种随机数方法: 1. srand((unsigned)time(0)); //不加这句每次产生的随机数不变 int i = rand() % 5; 2. srandom(time(0)); int i = random() % 5; 3. int i = arc4random() % 5 ; 注:rand()和random()实际并不是一个真正的伪随机数发生器,在使用之前需要先初始化随机种子,否则每次生成的随机数一样. arc4

iOS下的 Fixed + Input 调用键盘的时候fixed无效问题解决方案

做touchweb开发的时候,做头疼的是,电脑上面时候好的,有些手机上面也是好的,个别手机和浏览器出现问题,对于这些,只能慢慢调试,找问题. 今天说一下比较老的IOS的问题,那就是"iOS下的 Fixed + Input 调用键盘的时候fixed无效问题". 案例如下 <body>  <header>这里是头部</header>  <section&g

解决IOS下不支持fixed的问题

我们公司有一个页面底部用到了fixed样式,每当弹出键盘的时候,IOS下fixed就会走样(据我所知android没有该问题). 为此之前我经过产品的同意做了简单的处理(方法1). 方法一: focus的时候让fixed块position变为relative,这是最简单的处理方法. 下面是我的小demo <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf

【转载】Web移动端Fixed布局的解决方案

特别声明:本文转载于EFE的<Web移动端Fixed布局的解决方案>.如需转载,烦请注明原文出处:http://efe.baidu.com/blog/mobile-fixed-layout 移动端业务开发,iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况. 但是 fixed 元素在有软键盘唤起的情况下,会出现许多莫名其妙的问题. 这篇文章里就提供一个简单的有输入框情况下的 fixed 布局方案. iOS下的 Fixed + Input BUG现象让我们先举个栗子

web移动端input获得光标Fixed定位失效解决方案

移动端业务开发,iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况. 但是 fixed元素在有软键盘唤起的情况下,会出现许多莫名其妙的问题. 这篇文章里就提供一个简单的有输入框情况下的 fixed 布局方案. iOS下的 Fixed + Input BUG现象让我们先举个栗子,最直观的说明一下这个 BUG 的现象. 常规的 fixed 布局,可能使用如下布局(以下仅示意代码): <<span>body class="layout-fixed&quo

Web移动端Fixed布局的解决方案

移动端业务开发,iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况. 但是 fixed 元素在有软键盘唤起的情况下,会出现许多莫名其妙的问题. 这篇文章里就提供一个简单的有输入框情况下的 fixed 布局方案. iOS下的 Fixed + Input BUG现象让我们先举个栗子,最直观的说明一下这个 BUG 的现象. 常规的 fixed 布局,可能使用如下布局(以下仅示意代码): <body class="layout-fixed"> <

ios和android适配问题总结

_________________________________________________________________________________ 相关知识点移动端. 适配(兼容). ios点击事件300ms延迟. 点击穿透. 定位失效...... 问题&解决方案手机浏览器独有的三个事件? onTouchmove,ontouchend,ontouchstart,ontouchcancel 为什么要用Zepto? jquery适用于PC端桌面环境,桌面环境更加复杂,jquery

IOS和安卓不同浏览器常见bug

一.IOS自带safari浏览器 1.safari不支持fixed.input输入框 iOS下的 Fixed + Input 调用键盘的时候fixed无效问题拖动页面时 header 和 footer 已经定位在了对应的位置,目测没问题了但接下来问题就来了!如果底部输入框软键盘被唤起以后,再次滑动页面,就会看到如下图所示: 我们看到 fixed 定位好的元素跟随页面滚动了起来… fixed 属性失效了! 这是为什么呢?简单解释下: > 软键盘唤起后,页面的 fixed 元素将失效(即无法浮动

[转] Web移动端Fixed布局的解决方案

移动端业务开发,iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况. 但是 fixed 元素在有软键盘唤起的情况下,会出现许多莫名其妙的问题. 这篇文章里就提供一个简单的有输入框情况下的 fixed 布局方案. iOS下的 Fixed + Input BUG现象让我们先举个栗子,最直观的说明一下这个 BUG 的现象. 常规的 fixed 布局,可能使用如下布局(以下仅示意代码): <body class="layout-fixed"> <

八、Web移动端Fixed布局的解决方案

移动端业务开发,iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况. 但是 fixed 元素在有软键盘唤起的情况下,会出现许多莫名其妙的问题. 这篇文章里就提供一个简单的有输入框情况下的 fixed 布局方案. iOS下的 Fixed + Input BUG现象让我们先举个栗子,最直观的说明一下这个 BUG 的现象. 常规的 fixed 布局,可能使用如下布局(以下仅示意代码): <body class="layout-fixed"> <

【原】移动web资源整理(安卓、ios移动端兼容性问题归整)

meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 忽略将页面中的数字识别为电话号码 <meta name="format-detection" content=

ios和android适配

一些情况下对非可点击元素如(label,span)监听click事件,ios下不会触发解决方案:css增加cursor:pointer; 三星手机遮罩层下的input.select.a等元素可以被点击和focus(点击穿透) 问题发现于三星手机,这个在特定需求下才会有,因此如果没有类似问题的可以不看.首先需求是浮层操作,在三星上被遮罩的元素依然可以获取focus.click.change),有两种解决方案: 1.是通过层显示以后加入对应的class名控制,截断显示层下方可获取焦点元素的事件获取

【原】移动web资源整理

2013年初接触移动端,简单做下总结,首先了解下移动web带来的问题设备更新换代快——低端机遗留下问题.高端机带来新挑战浏览器厂商不统一——兼容问题多网络更复杂——弱网络,页面打开慢低端机性能差——页面操作卡顿 HTML5新技术多——学习成本不低未知问题——坑多面对这些问题,一开始我们只能在未知中试错,知道错误的方案才能更容易寻找正确的解决问题思路,2年多来,可看到移动web在业界不断趋向于成熟,各种框架和解决方案不断的涌现让移动端开发不再是个噩梦. 这几天把想到的一点经验先罗列出来

移动web资源整理

[原]移动web资源整理 2013年初接触移动端,简单做下总结,首先了解下移动web带来的问题设备更新换代快--低端机遗留下问题.高端机带来新挑战浏览器厂商不统一--兼容问题多网络更复杂--弱网络,页面打开慢低端机性能差--页面操作卡顿 HTML5新技术多--学习成本不低未知问题--坑多面对这些问题,一开始我们只能在未知中试错,知道错误的方案才能更容易寻找正确的解决问题思路,2年多来,可看到移动web在业界不断趋向于成熟,各种框架和解决方案不断的涌现让移动端开发不再是个噩梦. 这几天

ios 对 fixed

热门专题