移动端fixed后 横竖屏切换时上部或下部出现空隙问题
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1">
<style>
body {} header {
position: fixed;
width: 100%;
height: 15vw;
top: 0;
/*left:0;*/
background: red;
} .box {
width: 40vw;
margin: 0 auto;
} @media all and (orientation: portrait) {
#hengping {
display: none !important;
}
}
/*设备横屏时的样式*/ @media all and (orientation: landscape) {
#hengping {
display: block !important;
}
} #hengping {
display: none;
background: black;
position: fixed;
left: 0;
/* right:0;*/
bottom: 0;
/*top:0;*/
z-index: 9999;
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
</head> <body>
<header></header>
<div id="hengping"></div>
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto unde ratione aspernatur in ipsam nemo doloribus cum architecto nihil minus! Reprehenderit perspiciatis accusamus, provident odio facere dolores asperiores dolorem, sint. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto unde ratione aspernatur in ipsam nemo doloribus cum architecto nihil minus! Reprehenderit perspiciatis accusamus, provident odio facere dolores asperiores dolorem, sint. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto unde ratione aspernatur in ipsam nemo doloribus cum architecto nihil minus! Reprehenderit perspiciatis accusamus, provident odio facere dolores asperiores dolorem, sint. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto unde ratione aspernatur in ipsam nemo doloribus cum architecto nihil minus! Reprehenderit perspiciatis accusamus, provident odio facere dolores asperiores dolorem, sint. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto unde ratione aspernatur in ipsam nemo doloribus cum architecto nihil minus! Reprehenderit perspiciatis accusamus, provident odio facere dolores asperiores dolorem, sint. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto unde ratione aspernatur in ipsam nemo doloribus cum architecto nihil minus! Reprehenderit perspiciatis accusamus, provident odio facere dolores asperiores dolorem, sint. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto unde ratione aspernatur in ipsam nemo doloribus cum architecto nihil minus! Reprehenderit perspiciatis accusamus, provident odio facere dolores asperiores dolorem, sint. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto unde ratione aspernatur in ipsam nemo doloribus cum architecto nihil minus! Reprehenderit perspiciatis accusamus, provident odio facere dolores asperiores dolorem, sint. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto unde ratione aspernatur in ipsam nemo doloribus cum architecto nihil minus! Reprehenderit perspiciatis accusamus, provident odio facere dolores asperiores dolorem, sint. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto unde ratione aspernatur in ipsam nemo doloribus cum architecto nihil minus! Reprehenderit perspiciatis accusamus, provident odio facere dolores asperiores dolorem, sint. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto unde ratione aspernatur in ipsam nemo doloribus cum architecto nihil minus! Reprehenderit perspiciatis accusamus, provident odio facere dolores asperiores dolorem, sint. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto unde ratione aspernatur in ipsam nemo doloribus cum architecto nihil minus! Reprehenderit perspiciatis accusamus, provident odio facere dolores asperiores dolorem, sint.
</div>
</body>
<script src="jquery.js"></script>
<script>
// 横竖屏幕提醒
(function transverse() {
if (window.orientation == 90 || window.orientation == -90) {
var t=$(window).scrollTop()
$('#hengping').hide();
// setTimeout(function(){
$(window).scrollTop(t+1);
// 横屏
$('#hengping').show(); } else if (window.orientation == 180 || window.orientation === 0) {
//竖屏
var t=$(window).scrollTop()
$('#hengping').hide();
// setTimeout(function(){
$(window).scrollTop(t+1); // },2000)
}
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", transverse, false);
})();
</script> <!-- ios 微信端出现这样问题 安卓微信测试了几台没有这个问题--> </html>
此方法灵感来自京东移动端页面，有兴趣的朋友可以看看京东手机端的效果
注：在手机ios升级到了11版本，这个问题就没有了，不知道11以下会不会还有
移动端fixed后 横竖屏切换时上部或下部出现空隙问题的更多相关文章
- dialog横竖屏切换时消失的解决方法
声明 本文原创,转载请注明来自xiaoQLu http://www.cnblogs.com/xiaoQLu/p/3324764.html dialog的生命周期依赖创建他的activity,怎么设置横 ...
- Android 中Activity生命周期分析：Android中横竖屏切换时的生命周期过程
最近在面试Android,今天出了一个这样的题目,即如题: 我当时以为生命周期是这样的: onCreate --> onStart -- ---> onResume ---> onP ...
- 横竖屏切换时,Activity的生命周期
横竖屏切换时,Activity的生命周期 1.新建一个Activity,并把各个生命周期打印出来 2.运行Activity,得到如下信息 onCreate-->onStart-->onRe ...
- 横竖屏切换时Activity的生命周期
设置横竖屏切换时Activity生命周期的属性设置,在清单文件中的Activity节点中设置.根据具体需求设置: 1.不设置Activity的android:configChanges时,切屏会重新调 ...
- Android 如何去掉手机中横竖屏切换时的转屏动画？
前言 欢迎大家我分享和推荐好用的代码段~~ 声明 欢迎转载,但请保留文章原始出处: CSDN:http://www.csdn.net ...
- Android（java）学习笔记224：横竖屏切换时Activity的生命周期
1.横竖屏切换的生命周期 默认情况下横竖屏切换,先销毁再创建 2.有的时候,默认情况下的横竖屏切换(先销毁再创建),对应用户体验是不好的,比如是手机游戏横竖屏切换对游戏体验非常不好,下面两种方 ...
- 测试横竖屏切换时activity 的生命周期
对于这个面试题,相信大家都见过,网上给出的答案是: 1.不设置Activity的android:configChanges时,切屏会重新调用各个生命周期,切横屏时会执行一次,切竖屏时会执行两次 2.设 ...
- 安卓横竖屏切换时activity的生命周期
关于Activity横竖屏切换的声明周期变化: 1.新建一个Activity并把各个生命周期打印出来 2.运行Activity,得到如下信息 onCreate-->onStart-->on ...
- Android（java）学习笔记167：横竖屏切换时Activity的生命周期
1.横竖屏切换的生命周期 默认情况下横竖屏切换,先销毁再创建 2.有的时候,默认情况下的横竖屏切换(先销毁再创建),对应用户体验是不好的,比如是手机游戏横竖屏切换对游戏体验非常不好,下面两种方 ...
随机推荐
- maven 项目加载本地JAR
将jar安装到本地的maven仓库 1.首先确定本地有maven环境. 2.安装本地jar 模板: mvn install:install-file -Dfile=<path-to-file& ...
- zset 有序集合
zadd key score1 value1 score2 value2 .. 添加元素 redis 127.0.0.1:6379> zadd stu 18 lily 19 hmm 20 lil ...
- java中不同类如何相互访问变量值（新手见解，可能很low）
最近在学基础java知识,这个是很常见的问题之一了,下面我要列出三种异类取值方法,当然不止这些,我选择了最简单的三种: 1.可以使用static静态变量,直接调用要访问类的属性和方法.因为 Java ...
- iOS开发者账号证书配置及相关工作
申请到开发者账号,肯定要先配置一下才可以使用,这主要是iOS证书及配置文件: 以下这篇文章写得比较全面,故不再累赘,需要的同学可以看一下: iOS开发证书与配置文件的使用
- div基本组成要素
title下面先清除固有格式 style{ *{ margin:0 auto padding:0 foant family } } div{ width height border backgroun ...
- java中端口号被占用的解决办法
第一步,命令提示符号,执行命令:netstat -ano 可见,占用1099端口的进程的PID是10460. 第二步,命令提示符号,执行命令:tasklist(通过pid 10460定位) 可见,该占 ...
- CommonJS 与 ES6 的依赖操作方法(require、import)
CommonJS:http://www.commonjs.org/specs/modules/1.0/ ES2015的 export:https://developer.mozilla.org/en- ...
- Jmeter中模拟多用户执行多场景操作
1.其实一个用户组就是一个场景(Thread Group).可以在一个测试计划中进行多个场景的执行,在测试计划下加一个全局的User Defined Variables,在这个里面可以设置执行总数to ...
- 【BZOJ1396】识别子串 - 后缀自动机+线段树
题意: Description Input 一行,一个由小写字母组成的字符串S,长度不超过10^5 Output L行,每行一个整数,第i行的数据表示关于S的第i个元素的最短识别子串有多长. 题解: ...
- async-validator 的中文文档翻译
阿里出品的 antd 和 ElementUI 组件库中表单校验默认使用的 async-validator,它在 gitbub 上也获得了 3.8k 的 star,可见这个库十分强大,奈何只有英文文档看 ...