ios html5头部无法固定的问题(安卓正常)
需求:头部菜单导航固定,中间正文可以拉动,在安卓手机正常,在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头部无法固定的问题(安卓正常)的更多相关文章
- webkit,HTML5头部标签
大家都知道在移动前端开发中添加一些webkit专属的HTML5头部标签,帮助浏览器更好解析html代码,更好地将移动web前端页面表现出来.本文整理一些HTML5头部<meta>标签常用的 ...
- 第八十七节,html5+css3pc端固定布局,大纲算法,section和div,结构分析
html5+css3pc端固定布局,大纲算法,section和div,结构分析 一.大纲算法 在HTML5中有一个很重要的概念,叫做HTML5 大纲算法(HTML5Outliner),它的用途是为用户 ...
- 第八十六节,html5+css3pc端固定布局,网站结构,CSS选择器,完成导航
html5+css3pc端固定布局,网站结构,CSS选择器,完成导航 页面采用1280的最低宽度设计,去掉滚动条为1263像素. 项目是PC端的固定布局,会采用像素(px)单位. 网站结构语义 在没有 ...
- 第九十一节,html5+css3pc端固定布局,完成首页
html5+css3pc端固定布局,完成首页 此时我们的首页就完成了 首页效果 其他页面我就不做了,原理相同,做其他页面时将头尾css分离调用即可 大纲算法 我们看看大纲算法比较清晰,说明符合规则 h ...
- 第九十节,html5+css3pc端固定布局,底部区域,说明区域,版权区域
html5+css3pc端固定布局,底部区域,说明区域,版权区域 完成: HTML代码: <!--尾部--> <footer class="wei-bu"> ...
- 第八十九节,html5+css3pc端固定布局,热门旅游取,标题介绍区,旅游项目区
html5+css3pc端固定布局,热门旅游取,标题介绍区,旅游项目区 样式: html代码: <!--主体--> <section class="zhu-ti" ...
- 第八十八节,html5+css3pc端固定布局,搜索区,插入大图,搜索框
html5+css3pc端固定布局,搜索区,插入大图,搜索框 设置一个div作为搜索区域 1.宽度为百分之百 2.最小宽度为1263,因为要考虑到手机,等小屏幕缩小后宽度会自适应,导致破坏布局,将最小 ...
- css3 的 calc()函数在布局中的使用----头部高度固定,页面正好占满一屏
最近项目遇到一个布局需求,头部高度固定,页面需要刚好占满一屏幕. 如下示意图: 方法:使用calc .wrap{ position: relative; margin-left: 24px; marg ...
- Dcloud HTML5 监听蓝牙设备 调用 原生安卓实现
最近一直搞Dcloud ,这是HTML5版本的开发,打包时候,可以打包成 apk 和ipa 分别运行在安卓和ios 机器上面, 但是这里面的资料很少,遇到问题,之后只能自己钻研总结, 现在有这么一个需 ...
随机推荐
- Nginx 日志切割后无法记日志
日志切割会向Nginx Pid发送一个信号重新打开日志文件,如果nginx.conf没有配置PID,切割日志后找不到PID文件,就会出问题
- Python高级核心技术97讲 系列教程
Python高级核心技术97讲 系列教程 整个课程都看完了,这个课程的分享可以往下看,下面有链接,之前做java开发也做了一些年头,也分享下自己看这个视频的感受,单论单个知识点课程本身没问题,大家看的 ...
- Selenium-------ActionChainApi接口详解
ActionChains UI自动化测试过程中,经常遇到那种,需要鼠标悬浮后,要操作的才会元素出现的这种场景,那么我们就要模拟鼠标悬浮到某一个位置,做一系列的连贯操作,Selenium给我们提供了Ac ...
- 杨柳目-杨柳科-Info-新闻:杨柳絮造成的危害相关视频资讯
ylbtech-杨柳目-杨柳科-Info-新闻:杨柳絮造成的危害相关视频资讯 1. 杨絮返回顶部 1. 2. https://www.baidu.com/sf/vsearch?pd=video&a ...
- 【时光回溯】【JZOJ3571】【GDKOI2014】内存分配
题目描述 输入 输出 输出m行,每行一个整数,代表输入中每次程序变化后系统所需要的空闲内存单位数. 样例输入 2 3 1 4 1 4 2 2 1 2 1 1 1 1 1 样例输出 2 3 1 数据范围 ...
- 开窗函数over()中partition by关键字解析
partition by关键字是分析性函数的一部分,它和聚合函数不同的地方在于它能返回一个分组中的多条记录,而聚合函数一般只有一条反映统计值的记录,partition by用于给结果集分组,如果没 ...
- ios开发――解决UICollectionView的cell间距与设置不符问题
在用UICollectionView展示数据时,有时我们希望将cell的间距调成一个我们想要的值,然后查API可以看到有这么一个属性: - (CGFloat)minimumInteritemSpaci ...
- python 自主控制异常:用户自定义异常
- React 从零搭建项目 使用 create-react-app脚手架
一.安装 npm install -g create-react-app 版本校验:create-react-app --version 二.创建项目 create-react-app指令默认调用np ...
- 2019-10-22-Roslyn-打包自定义的文件到-NuGet-包
title author date CreateTime categories Roslyn 打包自定义的文件到 NuGet 包 lindexi 2019-10-22 19:45:34 +0800 2 ...