第一次写博客~  大家悠着看，有则改之，无则加冕，对不对的给个回复，让我知道你的存在。

在做活动页的时候，经常会碰到一些需要弹出显示的输入框（情节前提：本人安卓机~），前天自己写的时候自己调试没问题后发给测试，直接与我对接的测试告诉我没问题了，让同事看下就可以上线了，幸福满满的我准备休息一会。

BUT！！！BUT！！！BUT！！！，五分钟后她告诉我说问题有好多，而且全部都在iOS端！作为一个爱国人士（其实是没钱~）我是从不用苹果的，然后就经过N多时间的调试，从网上百度了好多方法，一直到下班，总于找到一个可以的，人家下班走了怎么办？我只能找其他同事借了一个苹果4s~~（可能是他们楼层的测试机~真心破~），惊喜的发现，Oh, My God，老子做到了！ 又一次幸福满满的回家了。

第二天早上来了以后立马用同事的5s也测试下，没问题！发给测试看。然后。。。悲剧了！在6p上不行，万般无奈的我只有请公司的牛牛帮忙。

以上纯属废话~    爱看不看~~

绝对定位模拟固定定位~

原理：待会画张图吧，嘴说太麻烦~

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>绝对定位替换固定定位</title>
<meta name="viewport" chang="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<style type="text/css">
;;}
html,body{
%; /* 必须要 */
%;/* 必须要 */
}
.dahezi{
%;/* 必须要 */
%;/* 必须要 */
overflow: hidden;/* 必须要 */
position: relative;/* 必须要 */
}
.chang_box{
%;/* 必须要 */
%;/* 必须要 */
overflow: scroll;/* 必须要 */
}
.chang{
px;
}
.fixed_box{
%;
px;
position: absolute;/* 必须要 */
px;
text-align: center;
px;
background: red;
color: #fff
}
.fixed_box2{
position: absolute;/* 必须要 */
%;
%;
rem;
rem;
background-color: #f12313;
}
</style>
</head>
<body>
<div class="dahezi">
<div class="chang_box">
<div class="chang">我很长~</div>
<div class="chang">我很长~</div>
<div class="chang">我很长~</div>
<div class="chang">我很长~1</div>
<div class="chang">我很长~</div>
<div class="chang">我很长~</div>
<div class="chang">我很长~</div>
<div class="chang">我很长~2</div>
<div class="chang">我很长~</div>
<div class="chang">我很长~</div>
<div class="chang">我很长~</div>
<div class="chang">我很长~</div>
<div class="chang">我很长~3</div>
<div class="chang">我很长~</div>
<div class="chang">我很长~</div>
<div class="chang">我很长~</div>
<div class="chang">我很长~</div>
<div class="chang">我很长~4</div>
<div class="chang">我很长~</div>
<div class="chang">我很长~</div>
</div>
<div class="fixed_box">
原本固定的盒子1
</div>
<div class="fixed_box2">
原本固定的盒子2
</div>
</div>
</body>
</html>

iOS 固定定位不兼容、input获取焦点后位置不对。的更多相关文章

  1. IOS 固定定位底部input输入框，获取焦点时弹出的输入法键盘挡住input

    移动页面经常会做到这样一个效果,看下面的图片,重点就是那个固定定位的底部,里面有个input输入框,在输入字符的时候,安卓手机看着是完全没有问题! 1.页面没有点击底部input的初始状态 2.安卓手 ...

  2. iOS下Html页面中input获取焦点弹出键盘时挡住input解决方案—scrollIntoView()

    问题描述 iOS系统下,移动web页面,inpu获取焦点弹出系统虚拟键盘时,偶尔会出现挡住input的情况,尽管概率不大,但是十分影响用户体验. 问题重现 原始页面:页面中有header.main.f ...

  3. iOS下Html页面中input获取焦点弹出键盘时挡住input解决方案

    问题描述 iOS系统下,移动web页面,inpu获取焦点弹出系统虚拟键盘时,偶尔会出现挡住input的情况,尽管概率不大,但是十分影响用户体验. 问题重现 原始页面:页面中有header.main.f ...

  4. 移动端登录页面input获取焦点后页面布局及输入框上移的问题

    最近切微信页面的时候,发现移动端的登录页面,带输入框的那种,如图: 从页面本身来看没有什么问题,上传至测试服务器,用iphone访问也没有什么问题,但是当同事用Android手机获取焦点后,问题来了, ...

  5. 移动端 input 获取焦点后弹出带enter(类似于搜索，确定，前往)键盘，以及隐藏系统键盘

    一:调出系统带回车键的键盘 在项目中经常有输入框,当输入完成后点击确定执行相应的动作.但是有些设计没有确定或者搜索按钮,这就需要调用系统键盘,点击系统键盘的确定后执行相应动作. 但是单纯的input是 ...

  6. CSS——相对定位、绝对定位、固定定位

    相对定位: position:relative 当元素被设置相对定位或是绝对定位后,将自动产生层叠,他们的层叠级别自然的高于文本流,除非设置其z-index值为负值. 并且我们发现当相对定位元素进行位 ...

  7. (转)完美解决 Android WebView 文本框获取焦点后自动放大有关问题

    完美解决 Android WebView 文本框获取焦点后自动放大问题 前几天在写一个项目时,要求在项目中嵌入一个WebView 本来很快就完成了,测试也没有问题.但发给新加坡时,他们测试都会出现文本 ...

  8. js实现导航固定定位

                                                                                   js实现导航固定定位 <!DOCTY ...

  9. 移动端底部fixed固定定位输入框ios下不兼容

    简短记录下最近开发移动端项目碰到的小坑,产品需求做一个售后对话页面,底部固定输入框,和微信对话差不多,但是在ios下,fixed失效,输入框被虚拟键盘挡住,在安卓下是正常的. 尝试过网上说的很多方法, ...

随机推荐

  1. FormData序列化及file文件上传

    表单数据上传 情况一: 一.当表单文件处于无任何处理状态时,用submit提交直接上传; 但这种方式上传,数据无任何处理:(极少使用): 但是传统的表单提交会导致页面刷新,但是有些情况下,我们并不希望 ...

  2. Xcode中的Vim--XVim

    相信大家在开始使用一门编程语言的时候,最先做的事就是去学习它对应的IDE.在你稍微进阶的时候,就会想着去学习IDE中的各种快捷键,比如 如何删除整行 如何在不使用鼠标的情况下,在代码间快速移动.跳转 ...

  3. Http请求处理流程

    本文结构: 一.HTTP请求处理流程的基础 1．网络分层 因特网TCP/IP分层模型共有五层:应用层.传输层.网络层.网络接口层和物理层.这种分层模型不同于OSI七层参考模型,但是,是实际使用中采用的 ...

  4. (六)彻底理解synchronized

    1.sychronized简介 在学习知识之前,我们先来看一个现象 public class SynchronizedDemo implements Runnable { private static ...

  5. Java基础——泛型

    一.定义 泛型(generic)是指参数化类型的能力.可以定义带泛型类型的类或方法,随后编译器会用具体的类型来替换它(泛型实例化).使用泛型的主要优点是能够在编译时,而不是在运行时检测出错误.它是jd ...

  6. 撩课-Web大前端每天5道面试题-Day27

    1.浏览器缓存? 浏览器缓存分为强缓存和协商缓存.当客户端请求某个资源时,获取缓存的流程如下: 先根据这个资源的一些 http header 判断它是否命中强缓存, 如果命中,则直接从本地获取缓存资源 ...

  7. Gson 使用和原理

    使用教程: http://blog.csdn.net/axuanqq/article/details/51441590 http://www.jianshu.com/p/fc5c9cdf3aab 源码 ...

  8. POJ3693(SummerTrainingDay10-J 后缀数组)

    Maximum repetition substring Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 10241   Ac ...

  9. 在微信小程序中引入 Iconfont 阿里巴巴图标库

    小程序的代码包不能超过4M,为了压缩代码包的大小,可以通过第三方链接引入图标资源 Iconfont 无疑是最常用的第三方图标库,这里介绍一下在微信小程序引入 Iconfont 的方法 一.下载图标 首 ...

  10. Vue 爬坑之路（十）—— Vue2.5 + Typescript 构建项目

    Typescript 在前端圈已经逐渐普及,Vue 2.5.0 改进了类型声明,使得对 TypeScript 更加友好 不过要想在项目中直接使用 TypeScript  仍然需要对项目进行一些改造 P ...