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

有问题的布局代码

<div class="page">
<div class="header">
头部固定
</div>
<div>
正文
</div>
</div> <style>
.header{
position:fixed;
top:0;
} .page{
position:absolute;
overflow-y:scroll;
}
</style>

    正确的布局方式是

<div  class="header">
头部固定
</div>
<div class="page">
正文
</div> <style>
.header{
position:fixed;
top:0;
} .page{
position:absolute;
overflow-y:scroll;
-webkit-transform: translateZ(0); --硬件加速
}
</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. 内核、中断和网络 $ sysctl -a | grep ...$ cat /proc/interrupts$ cat /proc/net/ip_conntrack /* may take some time on busy servers */$ netstat$ ss -s

    你的中断请求是否是均衡地分配给CPU处理,还是会有某个CPU的核因为大量的网络中断请求或者RAID请求而过载了? SWAP交换的设置是什么?对于工作站来说swappinness 设为 60 就很好, ...

  2. 洛谷P2859 [USACO06FEB]摊位预订Stall Reservations

    P2859 [USACO06FEB]摊位预订Stall Reservations 题目描述 Oh those picky N (1 <= N <= 50,000) cows! They a ...

  3. SQL Sever实验一 创建和删除数据库数据表

    一. 实验目的 1. 熟悉SQL    Server    2008    中SQL    Server    Management    Studio的环境 2. 了解SQL    Server   ...

  4. 深入剖析Redis RDN持久化机制

    rdb是redis保存内存数据到磁盘数据的其中一种方式(另一种是AOF).Rdb的主要原理就是在某个时间点把内存中的所有数据的快照保存一份到磁盘上.在条件达到时通过fork一个子进程把内存中的数据写到 ...

  5. twisted(转)

    reactor.protocol 这两个类都在 twisted.internet 命名空间中 reactor对象是Twisted编程当中的第一步,它就是一个反应器,专门负责与服务端的连接以及监听与服务 ...

  6. Excel柱状图折线图组合怎么做 Excel百分比趋势图制作教程

    Excel柱状图折线图组合怎么做 Excel百分比趋势图制作教程 用excel作图时候经常会碰到做柱状图和折线图组合,这样的图一般难在折线图的数据很小,是百分比趋势图,所以经常相对前面主数据太小了,在 ...

  7. C++11中的并发

    在 C++98 的时代,C++标准并没有包含多线程的支持,人们只能直接调用操作系统提供的 SDK API 来编写多线程程序,不同的操作系统提供的 SDK API 以及线程控制能力不尽相同.到了 C++ ...

  8. 微信端的user-Agent

    在iPhone下,返回 Mozilla/5.0 (iPhone; CPU iPhone OS 5_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Ge ...

  9. Codeforces 13C

    这题纠结了近半年,一直没有好的思路. 刚开始看这题的时候就是暴力,明显的TLE 后来才知道这题的“一种解”肯定是"原数列中某些数的集合" (很明显这题的最优策略并不唯一) 有原数列 ...

  10. LeetCode136 Single Number, LeetCode137 Single Number II, LeetCode260 Single Number III

    136. Single Number Given an array of integers, every element appears twice except for one. Find that ...