需求:头部菜单导航固定,中间正文可以拉动,在安卓手机正常,在ios上下拉的时候头部被带下来,有卡顿用户体验也不会,解决方法如下:

有问题的布局代码

  1. <div class="page">
  2. <div class="header">
  3. 头部固定
  4. </div>
  5. <div>
  6. 正文
  7. </div>
  8. </div>
  9.  
  10. <style>
  11. .header{
  12. position:fixed;
  13. top:0;
  14. }
  15.  
  16. .page{
  17. position:absolute;
  18. overflow-y:scroll;
  19. }
  20. </style>

    正确的布局方式是

  1. <div class="header">
  2. 头部固定
  3. </div>
  4. <div class="page">
  5. 正文
  6. </div>
  7.  
  8. <style>
  9. .header{
  10. position:fixed;
  11. top:0;
  12. }
  13.  
  14. .page{
  15. position:absolute;
  16. overflow-y:scroll;
  17. -webkit-transform: translateZ(0); --硬件加速
  18. }
  19. </style>

问题解决!
转载  http://www.itxst.com/detail/mb3qzfzm.html

ios html5头部无法固定的问题(安卓正常)的更多相关文章

  1. webkit,HTML5头部标签

    大家都知道在移动前端开发中添加一些webkit专属的HTML5头部标签,帮助浏览器更好解析html代码,更好地将移动web前端页面表现出来.本文整理一些HTML5头部<meta>标签常用的 ...

  2. 第八十七节,html5+css3pc端固定布局,大纲算法,section和div,结构分析

    html5+css3pc端固定布局,大纲算法,section和div,结构分析 一.大纲算法 在HTML5中有一个很重要的概念,叫做HTML5 大纲算法(HTML5Outliner),它的用途是为用户 ...

  3. 第八十六节,html5+css3pc端固定布局,网站结构,CSS选择器,完成导航

    html5+css3pc端固定布局,网站结构,CSS选择器,完成导航 页面采用1280的最低宽度设计,去掉滚动条为1263像素. 项目是PC端的固定布局,会采用像素(px)单位. 网站结构语义 在没有 ...

  4. 第九十一节,html5+css3pc端固定布局,完成首页

    html5+css3pc端固定布局,完成首页 此时我们的首页就完成了 首页效果 其他页面我就不做了,原理相同,做其他页面时将头尾css分离调用即可 大纲算法 我们看看大纲算法比较清晰,说明符合规则 h ...

  5. 第九十节,html5+css3pc端固定布局,底部区域,说明区域,版权区域

    html5+css3pc端固定布局,底部区域,说明区域,版权区域 完成: HTML代码: <!--尾部--> <footer class="wei-bu"> ...

  6. 第八十九节,html5+css3pc端固定布局,热门旅游取,标题介绍区,旅游项目区

    html5+css3pc端固定布局,热门旅游取,标题介绍区,旅游项目区 样式: html代码: <!--主体--> <section class="zhu-ti" ...

  7. 第八十八节,html5+css3pc端固定布局,搜索区,插入大图,搜索框

    html5+css3pc端固定布局,搜索区,插入大图,搜索框 设置一个div作为搜索区域 1.宽度为百分之百 2.最小宽度为1263,因为要考虑到手机,等小屏幕缩小后宽度会自适应,导致破坏布局,将最小 ...

  8. css3 的 calc()函数在布局中的使用----头部高度固定,页面正好占满一屏

    最近项目遇到一个布局需求,头部高度固定,页面需要刚好占满一屏幕. 如下示意图: 方法:使用calc .wrap{ position: relative; margin-left: 24px; marg ...

  9. Dcloud HTML5 监听蓝牙设备 调用 原生安卓实现

    最近一直搞Dcloud ,这是HTML5版本的开发,打包时候,可以打包成 apk 和ipa 分别运行在安卓和ios 机器上面, 但是这里面的资料很少,遇到问题,之后只能自己钻研总结, 现在有这么一个需 ...

随机推荐

  1. 区间加值,区间gcd, 牛客949H

    牛客小白月赛16H 小阳的贝壳 题目链接 题意 维护一个数组,支持以下操作: 1: 区间加值 2: 询问区间相邻数差的绝对值的最大值 3: 询问区间gcd 题解 设原数组为\(a\), 用线段树维护\ ...

  2. 忘记用了delete释放内存,如何防止内存溢出

    C++的内存管理还是要自己来做的,自己要进行内存的申请和释放 程序直接kill掉,OS会回收的 但是面试要问到这个问题,其实是想问你别的 RAII,也称为“资源获取就是初始化”,是c++等编程语言常用 ...

  3. 洛谷 P3950 部落冲突 树链剖分

    目录 题面 题目链接 题目描述 输入输出格式 输入格式 输出格式 输入输出样例 输入样例1 输出样例1 输入样例2 输出样例2 输入样例3 输出样例3 说明 思路 AC代码 总结 题面 题目链接 P3 ...

  4. DOM的利用冒泡做的一个小程序

    我们都知道DOM的事件流,有冒泡事件,如何有效的利用冒泡? 优化:应该尽量少的添加事件监听:原理:每添加一个事件监听事件,就会在浏览器中添加一个EventListener,如果数量过多,浏览器只能一个 ...

  5. IOC容器和注入方式

    IOC和DI IOC: 反转资源获取的方向 DI: IOC的另一种表述反式,即组件以一些预先定义好的方式(例如:setter方法)接收来自如容器的资源注入 IOC容器对象的关联关系 IOC前生--分离 ...

  6. Inno Setup生成桌面快捷方式

    在做项目的时候,需要打包成exe安装包.先前使用的是vs来打包,生成了setup.exe 和 *.msi的安装文件,不过也算顺利. 后因为要求采取 Inno Setup来打包程序,其中遇到个创建快捷方 ...

  7. Resource Management in View Controllers

    UIViewController生命周期 UIViewControl是IOS程序中的一个重要组成部分,扮演者一个大管家的身份,管理着程序中的众多视图,今天看看了官方文档并做了如下一些简单的记录: 何时 ...

  8. 【Leetcode链表】旋转链表(61)

    题目 给定一个链表,旋转链表,将链表每个节点向右移动 k 个位置,其中 k 是非负数. 示例 1: 输入: 1->2->3->4->5->NULL, k = 2 输出: ...

  9. springboot 数据访问【转】【补】

    六.SpringBoot与数据访问 1.JDBC pom.xml配置 <dependencies> <dependency> <groupId>org.spring ...

  10. python 并发之线程

    一.什么是线程 #指的是一条流水线的工作过程,关键的一句话:一个进程内最少自带一个线程,其实进程根本不能执行,进程不是执行单位,是资源的单位,分配资源的单位 #线程才是执行单位 #进程:做手机屏幕的工 ...