移动端fixed后横竖屏切换时上部或下部出现空隙问题

最新推荐文章于 2024-02-08 13:00:32 发布

weixin_33850890

最新推荐文章于 2024-02-08 13:00:32 发布

阅读量183

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wangmaoling/p/6427030.html

版权

<!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以下会不会还有

转载于:https://www.cnblogs.com/wangmaoling/p/6427030.html

weixin_33850890

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动端fixed后横竖屏切换时上部或下部出现空隙问题

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><meta name="viewport" content="width=device-width,user-scalable=n...
复制链接

扫一扫