简化：定义 div 最小宽度时在移动设备上为白色 space

Question

问题： 白色 space 出现在移动设备的页面底部 Chrome。

我把所有东西都挖空了以找出问题所在。现在有一个 div。页面占用整个视口就好了，until 我为 div.

定义了一个 min-width

我尝试了 css 重置。没有解决问题。

我是不是没有正确使用 min-width？

编辑（link 到页面）： http://www.hauntedbuckscounty.com/Tools/Environment.php

<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Haunted Bucks County (HBC)</title>

    <!-- jQuery -->
    <script type="text/javascript" src="http://www.hauntedbuckscounty.com/jquery-2.1.1.min.js"></script>

    <link rel="stylesheet" href="http://www.hauntedbuckscounty.com/style_theme.html">
    <link rel="stylesheet" href="http://www.hauntedbuckscounty.com/CSS/reset_main.css">
    <link rel="stylesheet" href="http://www.hauntedbuckscounty.com/CSS/reset_normalize.css">
    <link rel="stylesheet" media="(min-width: 1200px)" href="Carousel_1200px.css">
    <link rel="stylesheet" media="(max-width: 1199px) and (min-width: 0px)" href="Carousel_768px.css"> <!--MIN NORMALLY 768 BUT TEMPORARILY SET TO ZERO TO ALLOW LATER DEV OF MOBILE VERSION-->
    <style>
        * { border: 0px solid red; }

        html {border:0px blue solid;}
        footer {
            margin-top: 0px;
            padding-top: 0px;
        }
    </style>
</head>
<body style="background-image:linear-gradient(#0E0E0F 70%, #1B1B1C);border:0px white solid;">

<div id="Nav" style="position:relative;height:50px; width:100%;min-width:650px;
                     background-color:blue;">
</div>



</body>
</html>

Answer 1

如果要为移动设备创建响应式布局，则切勿使用静态最小宽度值，因为有许多设备具有不同的屏幕分辨率。

要解决您的问题，请不要使用 min-width 属性，而只需使用 width: 100% 作为您喜欢的媒体查询，即

@media screen only and (max-width: 767px) {
  #Nav { width: 100%; }
}

如果您继续对响应式布局使用最小宽度，您将始终以丑陋的滚动条或您网站内不需要的元素宽度而告终。

简化：定义 div 最小宽度时在移动设备上为白色 space

Simplified: White space on mobile when defining div min-width

html

css

mobile

width

removing-whitespace