Упрощенный: пустое место на мобильном телефоне при определении div min-width

Задача: Пробел в нижней части страницы на мобильном Chrome.Упрощенный: пустое место на мобильном телефоне при определении div min-width

Я потрошил все, чтобы изолировать проблему. Теперь есть один div. Страница занимает полный видовой экран просто отлично, до Я определяю min-width для div.

Я попробовал css reset. Не решает проблему.

Я просто неправильно использую min-width?

Edit (ссылка на страницу):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>

источник

2015-05-11 bloodymurderlive

Как вы ожидаете, что мобильная версия страницы с минимальной шириной 650 пикселей в любом случае подходит для окна? И для вас вопрос, можете ли вы предоставить JSFiddle или ссылку на свою страницу? – brance

Мое мобильное устройство - HTC One M7, которое имеет разрешение экрана 1920 x 1080 пикселей, поэтому я ожидал, что 650 пикселей будут в пределах этого диапазона. Однако, кажется, вы правы (хотя я не понимаю, почему). Когда я настраиваю min-width на 360px или ниже, пробел исчезает. Можете ли вы объяснить, почему это разрешает его на экране с полным HD? Думаю, мне нужно это понять, если я собираюсь создать для мобильных устройств. – bloodymurderlive

Если вы хотите создать адаптивный макет, для мобильных устройств, вы никогда не должны использовать статические мин-ширина значения, так как есть много устройств с различные разрешения экрана.

Чтобы решить проблему просто не использовать min-width свойства, а просто использовать width: 100% для запроса средств массовой информации, который вы предпочитаете, т.е.

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

Если вы будете продолжать использовать мин ширину для адаптивного дизайна, вы всегда будет иметь уродливую полосу прокрутки или нежелательную ширину элементов внутри вашего сайта.

источник

2015-05-11 17:42:54 brance

Мне все еще нужно выяснить, почему на экране моего телефона 1080 HD он ограничен шириной 360. Тем не менее, по крайней мере, теперь я знаю, что будет работать, а что нет, независимо от причин. – bloodymurderlive

Упрощенный: пустое место на мобильном телефоне при определении div min-width

ответ

Смежные вопросы