css – 在将ipad从纵向旋转到横向时,Div保持相同的宽度

概述我目前正在开发我的第一个网络应用程序并遇到了问题.当应用程序打开时,沿着底部的导航div(如下图所示)呈现正常,当我将iPad旋转为肖像时也是如此.但是当我从纵向旋转到横向时,它似乎保持相同的宽度,至少在我触摸屏幕之前.这不是一个大问题,因为当我开始滚动时它会恢复到正常状态,但看起来有些不整洁.我附上了一些图片： 肖像： 从纵向旋转到横向后： 这是我用于该div的CSS： nav {backgro 我目前正在开发我的第一个网络应用程序并遇到了问题.当应用程序打开时,沿着底部的导航div(如下图所示)呈现正常,当我将iPad旋转为肖像时也是如此.但是当我从纵向旋转到横向时,它似乎保持相同的宽度,至少在我触摸屏幕之前.这不是一个大问题,因为当我开始滚动时它会恢复到正常状态,但看起来有些不整洁.我附上了一些图片：

肖像：

从纵向旋转到横向后：

这是我用于该div的CSS：

nav {background-image: linear-gradIEnt(bottom,rgb(0,0) 15%,rgb(51,51,51) 69%);    background-image: -o-linear-gradIEnt(bottom,51) 69%);    background-image: -moz-linear-gradIEnt(bottom,51) 69%);    background-image: -webkit-linear-gradIEnt(bottom,51) 69%);    background-image: -ms-linear-gradIEnt(bottom,51) 69%);    background-image: -webkit-gradIEnt(    linear,left bottom,left top,color-stop(0.15,0)),color-stop(0.69,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自动填充屏幕的宽度而无需用户触摸它？

解决方法 我两次遇到过这个问题.第一次,我不得不改变我的视口元标记

<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) {    #navbar{wIDth:480px;}    #foot{wIDth:480px;}}@media screen and (min-device-wIDth: 481px) and (orIEntation:landscape) {    #navbar{wIDth:1024px;}    #foot{wIDth:1024px;}}

总结

以上是内存溢出为你收集整理的css – 在将ipad从纵向旋转到横向时,Div保持相同的宽度全部内容，希望文章能够帮你解决css – 在将ipad从纵向旋转到横向时,Div保持相同的宽度所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。