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 机器上面, 但是这里面的资料很少,遇到问题,之后只能自己钻研总结, 现在有这么一个需 ...
随机推荐
- Flask – SQLite:增加成员
目录 简介 结构 展示 技术 运行 代码 创建数据库表单 views视图 models模块 home主页 list列表页 result消息结果页 studentst添加成员 简介 结构 $ tree ...
- Django基础内容整理
- Faster RCNN算法demo代码解析
一. Faster-RCNN代码解释 先看看代码结构: Data: This directory holds (after you download them): Caffe models pre-t ...
- Hdu 1045 二分匹配
题目链接 Fire Net Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Tot ...
- arcgis信息窗口
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 拦截导弹 (最长上升子序列LIS)
#include <iostream> #include <stdio.h> #include <algorithm> using namespace std; ] ...
- Java 1.8 Stream 用例测试
package stream; import model.Student; import org.junit.jupiter.api.Test; import java.util.*; import ...
- DOM事件机制
前言 本文主要介绍DOM事件级别.DOM事件模型.事件流.事件代理和Event对象常见的应用,希望对你们有些帮助和启发! 本文首发地址为GitHub博客,写文章不易,请多多支持与关注! 一.DOM事件 ...
- 使MySQL支持emoji
1. 修改数据库的字符集 和 排序规则为: ALTER DATABASE database_name CHARACTER SET = utf8mb4 COLLATE = utf8mb4_unicode ...
- ubuntu下C操作Mysql数据库第一步
学习于: http://armsword.com/2013/06/20/ubuntu-c-mysql.html