移动端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.有的时候,默认情况下的横竖屏切换(先销毁再创建),对应用户体验是不好的,比如是手机游戏横竖屏切换对游戏体验非常不好,下面两种方 ...
随机推荐
- NPAPI——实现非IE浏览器的类似ActiveX的本地程序(插件)调用
一.Netscape Plugin Interface(NPAPI) 大致的说明可以看下官方文档Plugin 本文主要针对于JavaScript与插件交互部分做一些交流,比如用于数字证书的操作(淘宝和 ...
- 基于QMP实现对qemu虚拟机进行交互
本文详解QMP,包含qmp.hmp.qemu-guest-agent的介绍.工作原理.配置方法.范例 小慢哥的原创文章,欢迎转载 目录 ▪ QMP介绍 ▪ QMP语法 ▪ 单独使用qemu,启用QMP ...
- dozer初探
简介 Dozer是一款javaBean的映射工具,用于解决一个类到另外一个类的自动适配功能,它即支持简单的映射,也支持复杂类型的双向递归映射(官网). 示例 举个例子,假设说我们现在有User(用户) ...
- CoordinatorLayout：android之ScrollingActivity
1.效果图 2.新建SrcollingActivity后生成代码为: <?xml version="1.0" encoding="utf-8"?> ...
- python包管理（distutils、easy_install、pip、setup.py/requirements.txt、wheel）
distutils.distutils2 distutils是 python 标准库的一部分,2000年发布.使用它能够进行 python 模块的 安装 和 发布. distutils2 被设计为 d ...
- linux系统管理-软件包管理
概述: inux家族中的软件包管理有很多工具. 一种是在debiton系列的linux中,以像ubuntu的apt-get为代表.对于此种方式的管理方式,个人感觉挺简单方便的, 一种是在Fedora和 ...
- thinkphp 5 count()方法在控制器，模板中的使用方法
thinkphp中关于count()方法的使用: 控制器中:echo count($arr)模板中:{$arr | count}模板中if判断语句中 <if condition="co ...
- Lost Cows POJ - 2182 二分 + 树状数组
Code: #include<cstdio> #include<stack> #include<cstring> #include<algorithm> ...
- Ubuntu_18.04安装网易云音乐
首先到网易云音乐官网下载网易云音乐,ubuntu版的,安装. 这时候的图标打不开,缺少libcanberra sudo apt install libcanberra-gtk-module 安装完了配 ...
- IOS - 退出程序
- (void)exitApplication { OAAppDelegate *app = [UIApplication sharedApplication].delegate; UIWindow ...