将 ipad 从纵向旋转到横向时，Div 保持相同的宽度
Posted
技术标签:
【中文标题】将 ipad 从纵向旋转到横向时，Div 保持相同的宽度【英文标题】：Div remains same width when rotating ipad from portrait to landscape 【发布时间】：2012-01-13 23:20:54 【问题描述】：我目前正在开发我的第一个网络应用程序，但遇到了一个问题。当应用程序打开时，底部的导航 div（如下图所示）呈现良好，当我将 iPad 旋转为纵向时也是如此。但是当我从纵向旋转到横向时，它似乎保持相同的宽度，至少在我触摸屏幕之前是这样。这不是一个大问题，因为当我开始滚动时它会恢复到正常状态，但看起来有点不整洁。我附上了几张图片：
肖像：
从纵向旋转到横向后：
这是我用于该 div 的 CSS：
nav background-image: linear-gradient(bottom, rgb(0,0,0) 15%, rgb(51,51,51) 69%);
background-image: -o-linear-gradient(bottom, rgb(0,0,0) 15%, rgb(51,51,51) 69%);
background-image: -moz-linear-gradient(bottom, rgb(0,0,0) 15%, rgb(51,51,51) 69%);
background-image: -webkit-linear-gradient(bottom, rgb(0,0,0) 15%, rgb(51,51,51) 69%);
background-image: -ms-linear-gradient(bottom, rgb(0,0,0) 15%, rgb(51,51,51) 69%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.15, rgb(0,0,0)),
color-stop(0.69, rgb(51,51,51)));
border-top: 1px solid #000;
text-align: center;
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 51px;
color:#CCC;
font-size:11.3px;
font-weight:bold;
overflow: hidden;
margin: 0 auto 0;
有没有办法解决这个问题并让 div 自动填充屏幕的宽度而无需用户触摸它？
【问题讨论】：
我已将position: fixed; 更改为 relative 并解决了问题，但显然现在导航没有固定在页面底部，所以它不是一个解决方案，但显然这就是哪里问题出在..有什么想法吗？
你能把剩下的代码贴出来吗？
我真的没有空间在评论中发布所有内容，而且它不允许我编辑我的第一篇文章，因为我是新人。结构基本上是 ，其中 nav 是上面的 CSS，navContent 是以下内容：#navContent width:550px; margin: 0 auto 0;
您实际上并不需要包含代码的所有颜色和渐变以及字体大小。尝试将其减少到重现问题所需的最低限度。
重复What is the best method of re-rendering a web page on orientation change?
【参考方案1】：
我遇到过两次这个问题。第一次，我不得不从
更改我的视口元标记<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale = 1.0">
到
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
这行得通，但下一次就不行了，尽管结构基本相同……这一次，我不得不使用媒体查询，所以在 CSS 中，我将页脚设置为 position:fixed;bottom:0;width:100%
但紧随其后的是：
@media screen and (max-device-width: 480px) and (orientation:landscape)
#navbarwidth:480px;
#footwidth:480px;
@media screen and (min-device-width: 481px) and (orientation:landscape)
#navbarwidth:1024px;
#footwidth:1024px;
【讨论】：
【参考方案2】：我认为这可能与您的宽度属性有关，而不是将其设置为固定像素，为什么不将其设置为 100%？
我已经在模拟器上测试过了，但不是真正的设备。它似乎在 ios 模拟器上运行良好。
这是我的意思的一个例子：
<html>
<head>
<style>
#nav
position:fixed;
bottom:0px;
left:0px;
height:40px;
width:100%;
background:blue;
text-align:center;
</style>
</head>
<body>
<div id="nav">
<p>My Navigation bar</p>
</div>
</body>
</html>
【讨论】：
您好，nav div的宽度目前设置为100%，其中的div设置为550px；但我不认为这是导致问题的原因。当它从纵向到横向时，它会保持纵向屏幕的宽度大于 550 像素（我记得大约是 200 像素）。 @Kai Right 我认为这是您的样式表的整体问题。如果您发布了更多代码，即 html 和 css，我可以为您提供更多帮助。我建议你看看下面的link。它使用 jQuery 移动框架，将告诉您如何检测方向变化，并给出一个更改内容以适应方向变化的示例。如果你给 body 一个横向或纵向类，即 body.landscape 和 body.portrain 以及它们的创建样式，它应该可以解决你的问题。【参考方案3】：this 修复呢？
@media screen and (orientation: landscape)
.fix-orientation background:red; /* This will cause a style recalculation */
【讨论】：
这可能适用于 Galaxy S3 股票浏览器，但不适用于 Safari iPad（刚刚测试）。请参阅my answer 了解强制回流的有效解决方案。以上是关于将 ipad 从纵向旋转到横向时，Div 保持相同的宽度的主要内容，如果未能解决你的问题，请参考以下文章
当我在 iOS7 的 iPad 中将视图从纵向旋转到横向或反之亦然时，UITextfield shouldChangeCharactersInRange 没有调用
即使 iPad 处于纵向模式，如何强制 iPad 上的电视处于横向模式
从横向旋转到纵向 (iPad) 后 UITableView 的奇怪行为