移动端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.有的时候,默认情况下的横竖屏切换(先销毁再创建),对应用户体验是不好的,比如是手机游戏横竖屏切换对游戏体验非常不好,下面两种方 ...
随机推荐
- oracle 11g rac 修改VIP、scan VIP、priv IP
11GR2 RAC modify vip,public ip,private ip,scan vip实施步骤1 修改目的 根据业务的需求,需要由原来的临时IP改为生产ip,以下为调整前后对应的I ...
- webservice为什么不能用List参数，而只能用数组代替，我想是否因为List没有具体的类型信息，但用泛型的List（如：List<customer>）为什么也不行。如果用作参数的类中含有List<T>字段该如何处理？webservice参数是否支持
转自:https://social.microsoft.com/Forums/zh-CN/aded4301-b5f1-4aa6-aa46-16c46a60d05e/webservice20026201 ...
- Qt-上位机-串口助手
前言:参考自:https://blog.csdn.net/u014695839/article/details/50611549 一.新建Widgets Appliaction工程 二.设计ui界面 ...
- BZOJ 2957 分块
思路: 记录每栋楼楼顶与原点连线的斜率 那么一栋楼可见当且仅当前面所有楼的斜率都小于这栋楼 将n栋楼分为√(0.5*n*logn)块 每一块内维护一个单调上升子序列(注意不是LCS) 比如说4 1 2 ...
- 利用keytool颁发https证书方法
1.首先生成私有认证机构 命令:keytool -genkeypair -alias CAname 补充:keytool -list 命令增加 -v 可以查看CA详细信息 2.然后生成私有证书 命 ...
- Creative Cloud 无法连接问题
防火墙允许 PDApp.exe Windows:Program Files\Common Files\Adobe\OOBE\PDApp\core Mac OS:应用程序 > 实用工具 > ...
- udev的规则文件
转载于:https://linux.cn/article-9365-1.html 介绍 在 GNU/Linux 系统中,虽然设备的底层支持是在内核层面处理的,但是,它们相关的事件管理是在用户空间中通过 ...
- luoguP4238 【模板】多项式求逆 NTT
Code: #include <bits/stdc++.h> #define N 1000010 #define mod 998244353 #define setIO(s) freope ...
- [luogu3195 HNOI2008] 玩具装箱TOY (斜率优化dp)
题目描述 P教授要去看奥运,但是他舍不下他的玩具,于是他决定把所有的玩具运到北京.他使用自己的压缩器进行压缩,其可以将任意物品变成一堆,再放到一种特殊的一维容器中.P教授有编号为1...N的N件玩具, ...
- [读书笔记] Python 数据分析 （八）画图和数据可视化
ipython3 --pyplot pyplot: matplotlib 画图的交互使用环境