移动设备的垂直方向存在一个视口问题.正如您所看到的,在页脚下方,有一个填满屏幕的空白区域.如果我在水平方向上转动方向,则视口工作正常,对于平板电脑,桌面,等等.这个问题只存在于手机的垂直方向.有什么方法可以解决这个问题吗？
我已经有了这个元数据：
<Meta name="viewport" content="width=device-width,initial-scale=1.0" />
解决方法
您需要使用媒体查询：
>首先在CSS中使用移动(基础)样式(这通常是单列布局).
>然后在逐渐增大的视口断点处使用最小宽度的媒体查询(这是您应用网格样式的位置).
>使用每个较大的最小宽度断点来覆盖前一个
样式,以根据视口大小提供适当的布局.
>确保在html中使用<meta name="viewport" />标记以确保最佳的移动演示.
使用级联最小宽度媒体查询将允许您根据屏幕宽度准确了解正在应用的属性,并使您对css的故障排除更加容易.
> Media Query Logic
> 7 Habits of Highly Effective Media Queries
移动优先示例 – 小屏幕上的单列和更大的两列,在更大的屏幕上更改边框颜色
div {Box-sizing:border-Box; width:100%;border:solid 1px red;}
@media only screen and (min-width:37.5em) {
.half {
float: left;
margin: 0;
width: 50%;
}
.row:after {
content:"";
display:table;
clear:both;
}
}
@media only screen and (min-width:50em) {
div {border:solid 1px green;}
}
<div class="container">
<div class="row">
<div class="half">Stuff 1</div>
<div class="half">Stuff 2</div>
</div>
<div class="row">
<div class="half">Stuff 3</div>
<div class="half">Stuff 4</div>
</div>
</div>
