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

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

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. python 详解正则表达式的使用（re模块）

    一,什么是正则表达式 正则表达式(regular expression)描述了一种字符串匹配的模式(pattern),可以用来检查一个串是否含有某种子串.将匹配的子串替换或者从某个串中取出符合某个条件 ...

  2. 防止 IE 自动跳兼容模式

    在HTML <head> 中增加如下: <meta http-equiv="x-ua-compatible" content="IE=edge" ...

  3. C# Owin初探 概念理解（一）

    本文是阅读网上大牛的文章总结而成. 目录 1.Owin定义 2.为什么要用Owin 3.作用 4.总结 1.Owin定义 Owin是Open Web Interface For .NET.也就是.Ne ...

  4. AngularJS学习笔记（四）内置指令

    说说指令 不得不赞叹,指令是ng最为强大的功能之一,好吧,也可以去掉之一,是最强大的功能.ng内置了许多自定义的指令,这避免了我们自己去造轮子.同时,ng也提供了自定义指令的功能,可以让我们的页面元素 ...

  5. WCF 学习总结1 -- 简单实例

    从VS2005推出WCF以来,WCF逐步取代了Remoting, WebService成为.NET上分布式程序的主要技术.WCF统一的模型整合了以往的 WebService.Remoting.MSMQ ...

  6. 让 VS2010 支持 HTML5 和 CSS3.0

    现在的热门话题之一是HTML5 和 CSS3.好的, 它们都很时髦,它们也必然会影响网络开发的未来. 让我们尝尝鲜,花点时间安装设置一下,尽快让Visual Studio2010支持HTML5 和 C ...

  7. extJs常用的四种Ajax异步提交

    /** * 第一种Ajax提交方式 * 这种方式需要直接使用ext Ajax方法进行提交 * 使用这种方式,需要将待传递的参数进行封装 * @return */function saveUser_aj ...

  8. 【转】Java工程师成神之路

    针对本文,博主最近在写<成神之路系列文章> ,分章分节介绍所有知识点.欢迎关注. 一.基础篇 1.1 JVM 1.1.1. Java内存模型,Java内存管理,Java堆和栈,垃圾回收 h ...

  9. Java基础——iO（一）

    此文为了解IO知识的基础篇,这块我看了几天,感觉和前段时间学习集合一样,零散又重要.想记录一下这块由浅入深的学习过程.所以,接下来会记录几篇学习笔记,之后会有以前深入总结.因为这块比较重要啊,所以一定 ...

  10. spring 注解@PathVariable

    @PostMapping(name="获取用户信息", value="/getUser/{userId}") public Object getUser(@Pa ...