Viewport не работает, когда тело установлено как 1020px

Я пытаюсь сделать верхнюю границу навигационного div, чтобы покрыть весь экран, но он не работает.Viewport не работает, когда тело установлено как 1020px

body { 
 
    line-height: 1; 
 
    width: 1020px; 
 
    font-family: 'Droid Sans', sans-serif; 
 
    margin: 0 auto; 
 
} 
 

 
.nav { 
 
    margin: 0 auto; 
 
    border-top: 6px solid #9FCC7F; 
 
    width: 100vw; 
 
}

<body> 
 
    <div class="nav"></div><!-- Nav --> 
 
</body>

Странно, что функция просмотра порт не работает? Не могли бы вы взглянуть?

еще раз спасибо.

источник

2016-11-04 danish deb

любезно уточнить, что ваши ожидания? – prasanth

удалить 'ширина: 1020px' от тела решает? – kukkuz

Это то, чего я пытаюсь достичь - http://i.imgur.com/pXdXMYr.png @prasad –

изменение ширины: 100vw к ширине 100%, и он должен работать

Взгляните на это: Difference between Width:100% and width:100vw?

источник

2016-11-04 07:55:32 weinde

body { 
 
    line-height: 1; 
 
    font-family: 'Droid Sans', sans-serif; 
 
    margin: 0 auto; 
 
} 
 

 
.nav { 
 
    margin: 0 auto; 
 
    border-top: 6px solid #9FCC7F; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<body> 
 
    <div class="nav"></div><!-- Nav --> 
 
</body>

источник

2016-11-04 07:56:14 Venkatachalam

Это может быть потому, что тело ширина 1020px вы упомянули, превышает разрешение, которое может поддерживать устройство,

Проверьте эту ссылку: http://www.w3schools.com/css/css_rwd_viewport.asp

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

Установите свойство как

body{ 
width:100%; // for full page width 
}

еще

оставить ширину, браузер автоматически определяет его

источник

2016-11-04 07:58:03

Снятие ширины: 1020px от корпуса решает вашу проблему.

Вот пример https://jsfiddle.net/rahulxdd/wc5c0xk1/

body { 
      width: 100%; 
     }

источник

2016-11-04 08:05:36 Rahul

Добавить больше разъяснений, в чем проблема и отобразить его с помощью скрипки , –

Я не хочу удалять 1020px –

Я добавил код для вас: лучше применить с width:100%, потому что его будет автоматически регулировать с учетом отзывчивым вьюпорте. px не адаптируя

1020px только приспосабливаясь с в настольном mode.switch с режимом mobile,tab его не usefull.so только sugges с 100%

И не забудьте добавить тег видового экрана <meta name="viewport" content="width=device-width, initial-scale=1.0"> Сво Auto Adjust с viewport.

See Reference

body { 
 
    width: 100%; 
 
    font-family: 'Droid Sans', sans-serif; 
 
    } 
 

 
.nav { 
 
    position:absolute; 
 
    left:0; 
 
    top:0; 
 
    margin:0; 
 
    padding:0; 
 
    border-top: 6px solid #9FCC7F; 
 
    width: 100%; 
 
}

<body> 
 
    <div class="nav"></div><!-- Nav --> 
 
</body>

источник

2016-11-04 10:33:46 prasanth

Viewport не работает, когда тело установлено как 1020px

ответ

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