移动端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.有的时候,默认情况下的横竖屏切换(先销毁再创建),对应用户体验是不好的,比如是手机游戏横竖屏切换对游戏体验非常不好,下面两种方 ...
随机推荐
- Linux平台Oracle多个实例启动说明
环境说明:oracle实例1的SID为orcl(为默认启动的实例),第二个实例的SID为orcl2 启动步骤: 1)启动数据库实例完成后,启动数据库监听服务 #lsnrctl start 2)切 ...
- C# First and FirstOrDefault 方法详解
在工作中我们经常会遇到有关LINQ 的一些问题.这时我们就用到lambda 表达式. 下面是我在工作遇到的. First and FirstOrDefault 这两方法.我今天把它记录一下. 需要 ...
- Navicat 连接 Mysql 报2059错误的原因以及解决方法
MySQL的8.0.*版本使用的是caching_sha2_password验证方式,而Navicat Premium 12还不支持该种方式.解决方案: 1,降低mysql的版本 2,设置mysql支 ...
- 31.QT坐标系
dialog.h #ifndef DIALOG_H #define DIALOG_H #include <QDialog> #include <QLabel> #include ...
- POJ 1252 DP
题意:给你6个数.让你求出1~100范围内的数 最优情况下由这六个数加减几步得到. 输出平均值和最大值. 思路: 我就随便写了写,,,感觉自己的思路完全不对. 但是交上去 AC了!!! 我先当减法 不 ...
- python对象 -- 组合
详解组合:#Demo1class Game_kind: def __init__(self,nickname,sex,hp,ad): self.nickname = nickname self.sex ...
- 洛谷P4015 运输问题(费用流)
题目描述 WW 公司有 mm 个仓库和 nn 个零售商店.第 ii 个仓库有 a_iai 个单位的货物:第 jj 个零售商店需要 b_jbj 个单位的货物. 货物供需平衡,即\sum\limits ...
- ZBrush常用快捷键
ZBrush是一款数字雕刻和绘画软件,它以强大的功能和直观的工作流程彻底改变了整个三维雕刻行业.强大的功能离不开便捷的操作,为此ZBrush®提供了一系列常用操作快捷键,熟练掌握这些快捷键,可帮助您节 ...
- 阿里云数据库MySQL版快速上手！
MySQL是全球最受欢迎的开源数据库,其在各Web应用中均有广泛部署.阿里云数据库MySQL版基于Alibaba的MySQL源码分支,经过双11高并发.大数据量的考验,拥有优良的性能和吞吐量.除此之外 ...
- 说说Shell在代码重构中的应用
说说Shell在代码重构中的应用 出处信息 出处:http://blogread.cn/it/article/3426?f=wb 代码重构(Code refactoring)有时是很枯燥的,字符 ...