需求:头部菜单导航固定,中间正文可以拉动,在安卓手机正常,在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. 2019阿里云开年Hi购季云通信分会场全攻略!

    2019阿里云云上Hi购季活动已经于2月25日正式开启,从已开放的活动页面来看,活动分为三个阶段: 2月25日-3月04日的活动报名阶段.3月04日-3月16日的新购满返+5折抢购阶段.3月16日-3 ...

  2. bzoj 1191 [HNOI2006]超级英雄Hero——二分图匹配

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1191 不就是个最大匹配么. 结果WA得不行. 看TJ后发现题面上说了一旦没回答出一道题就结束 ...

  3. javascript DOM知识脑图

  4. CSS-DOM的小知识(一)

    在DOM编程艺术中,CSS-DOM应用很广泛. 1.style属性 通过element.style.property可以获得元素的样式,但是style属性只能够返回内嵌样式,对于外部样式表的样式和he ...

  5. JS更改字体颜色、背景颜色

    CSS 颜色十六进制值  http://www.w3school.com.cn/cssref/css_colorsfull.asp CSS background-color 属性 body { bac ...

  6. [新手必看] 17个常见的Python运行时错误

    对于刚入门的Pythoner在学习过程中运行代码是或多或少会遇到一些错误,刚开始可能看起来比较费劲.随着代码量的积累,熟能生巧当遇到一些运行时错误时能够很快的定位问题原题.下面整理了常见的17个错误, ...

  7. 【水滴石穿】rn_statusbar

    先放项目地址https://github.com/hezhii/rn_statusbar 来看一下效果 咩有感觉很怎么样,看代码 根入口文件 //index.js //看代码我们知道入口是app.js ...

  8. 【POJ 3294】Life Forms

    [链接]h在这里写链接 [题意] 给你n个字符串. 让你找最长的字符串s; 这个s在超过一半的子串里面都有出现过且长度大于n/2; 如果有多个,输出多行. (按字典序输出) 也没说会不会出现大写. [ ...

  9. qt,pro文件中用于平台区分的写法

    qt,pro文件中用于平台区分的写法 切记: 大括号和平台需要在同一行中,否则会失效 unix { TARGET = appname } macx { TARGET = appname2 } win3 ...

  10. 【JZOJ3875】【NOIP2014八校联考第4场第2试10.20】星球联盟(alliance)

    fg 在遥远的S星系中一共有N个星球,编号为1-N.其中的一些星球决定组成联盟,以方便相互间的交流. 但是,组成联盟的首要条件就是交通条件.初始时,在这N个星球间有M条太空隧道.每条太空隧道连接两个星 ...