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

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

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. <context:component-scan>子标签：<context:include-filter>和<context:exclude-filter>使用时要注意的地方

    在Spring MVC中的配置中一般会遇到这两个标签,作为<context:component-scan>的子标签出现. 但在使用时要注意一下几点: 1.在很多配置中一般都会吧Spring ...

  2. Error creating bean with name 'tomcatEmbeddedServletContainerFactory'

    org.springframework.boot.autoconfigure.web.EmbeddedServletContainerAutoConfiguration$EmbeddedTomcato ...

  3. [转]magento性能优化

    本文转自:https://www.cnblogs.com/zhengyanbin2016/p/5577792.html magento性能优化 14个快速加载web页面的技巧: 减少HTTP请求数使用 ...

  4. [转]Magento 2中文文档教程 - 配置和运行cron(定时任务)

    本文转自:https://blog.csdn.net/xz_src/article/details/72793476 cron(定时任务)概述 Magento 2 有许多功能需要用到cron(定时任务 ...

  5. c++ 重载、覆盖 （隐藏）（virtual）

    背景:不用说,学习C++的你,一定知道这是个词--至于难不难懂,就看你的理解能力了,我理解也是费劲千辛万苦啊,成员函数的重载.覆盖(override).隐藏.virtual 很容易混淆,C++程序员必 ...

  6. Oracle TO_DATE() 函数格式化时间【全】

    TO_DATE格式(以时间:2007-11-02   13:45:25为例)          Year:             yy two digits 两位年                显 ...

  7. SQL 通配符的使用？三种

    SQL 通配符 通配符可用于替代字符串中的任何其他字符. SQL 通配符 在 SQL 中,通配符与 SQL LIKE 操作符一起使用. SQL 通配符用于搜索表中的数据. 在 SQL 中,可使用以下通 ...

  8. Median（vector+二分）

    Median Time Limit: 5 Seconds Memory Limit: 65536 KB The median of m numbers is after sorting them in ...

  9. Java - "JUC" CyclicBarrier源码分析

    Java多线程系列--“JUC锁”10之 CyclicBarrier原理和示例 CyclicBarrier简介 CyclicBarrier是一个同步辅助类,允许一组线程互相等待,直到到达某个公共屏障点 ...

  10. UI-12组结对编程作业总结

    UI-12组结对编程作业总结 源码Github地址 https://github.com/tilmto/TILMTO/tree/master/Arithmetic 作业摘要 本次结对编程作业分为以下两 ...