Как установить ширину элемента, равную ширине устройства?

Question

Я хочу, чтобы заголовок моего сайта занимал столько же ширины, сколько и экран монитора. Я попытался дать width: 100%, width: vw и width: device-width. Проблема заключается в том, что при изменении размера окна браузера заголовок принимает ширину, равную ширине текущей видовой области, а не ширина устройства. Код выглядит следующим образом:

body { 
 
    height: 100vh; 
 
    width: 100vw; 
 
} 
 
* { 
 
    margin: 0; 
 
    padding: 0; 
 
    font-family: courier; 
 
    color: white; 
 
} 
 
header { 
 
    display: block; 
 
    height: 150px; 
 
    width: device-width; 
 
    background-color: #666633; 
 
    text-align: center; 
 
} 
 
header h1 { 
 
    font-size: 2em; 
 
    color: white; 
 
} 
 
nav { 
 
    width: auto; 
 
    margin: auto; 
 
    margin-top: 20px 
 
}

<header> 
 
    <h1 class="heading"> Syco Scientist Records </h1> 
 
    <nav> 
 
    <ul> 
 
     <li><a href="anupamindex.html" class="active">Home</a> 
 
     </li> 
 
     <li><a href="ourwork.html">Our Work</a> 
 
     </li> 
 
     <li><a href="testimonials.html">Testimonials</a> 
 
     </li> 
 
     <li><a href="projects.html">Projects</a> 
 
     </li> 
 
     <li><a href="contact.html">Contact Us</a> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 
</header>

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

• Как установить ширину жатки же, как ширина экрана монитора, даже если окно браузера изменяет размер?

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

• Есть ли аналогичный из device-width не для мобильных платформ?

Answer 1

Чтобы получить размер экрана, а не ширину браузера, вам понадобится javascript. Вы можете использовать

screen.width 

(http://www.w3schools.com/jsref/prop_screen_width.asp) Затем вы можете использовать, чтобы установить ширину контейнера с помощью JavaScript.

Примечание: вы можете иметь некоторые расхождения между операционными системами

Answer 2

вы можете управлять размером экрана Использование JavaScript

Установите этот флажок пример

<script> 
var txt = ""; 
txt += "<p>Total width/height: " + screen.width + "*" + screen.height + "</p>"; 
txt += "<p>Available width/height: " + screen.availWidth + "*" + screen.availHeight + "</p>"; 
txt += "<p>Color depth: " + screen.colorDepth + "</p>"; 
txt += "<p>Color resolution: " + screen.pixelDepth + "</p>"; 

document.getElementById("demo").innerHTML = txt; 
</script> 

Answer 3

width: auto Просто используйте. Он будет регулировать ширину в соответствии с заполнением.

Answer 4

пожалуйста, попробуйте это без использования Javascript

div 
    { 
     width: 100vw; 
     height: 56.25vw; 
     background: pink; 
     max-height: 100vh; 
     max-width: 177.78vh; /* 16/9 = 1.778 */ 
     margin: auto; 
     position: absolute; 
     top:0;bottom:0; /* vertical center */ 
     left:0;right:0; /* horizontal center */ 
    } 

или

var width = (window.innerWidth > 0) ? window.innerWidth : screen.width; 

Answer 5

Используйте мета-тег первый для HTML тела отверстия, то вы можете использовать с: 100%.

Answer 6

Я буду использовать:

width: 100vw; display: inline-block;

или я пытаюсь с display: flex; Проверьте, что вы не имеете где-нибудь (на родителя) position: relative.

Answer 7

не будет работать без JavaScript, но это только три строки ... Вот скрипка: https://jsfiddle.net/0yL3fbyf/

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

var x = screen.width + 'px'; 

Затем я назначаю эту переменную как width в заголовок. Я дал заголовке идентификатор, так как по какой-то причине getElementsByTagName("header") не получилось:

var y = document.getElementById('my_header'); 
y.style.width = x; 

Answer 8

без JQuery/JavaScript может быть трудно совпасть ширина/высота элемента вам необходимо. параметры устанавливают 100% или жесткое кодирование на ширине/высоте экрана устройства. Благодарю.

Answer 9

Добавить свойство height: auto; в заголовок, так как это даст вашему коду гибкость при настройке высоты в соответствии с экраном, на котором он используется. Итак, теперь вы используете любое устройство, ваша высота заголовка будет автоматически регулироваться.

Answer 10

Относительные значения, такие как vw (ширина видового экрана), vh (высота видового экрана), vm (минимальная область просмотра), хорошо подходят для таких устройств, как экраны, где размер и разрешение устройства неизвестны или могут быть изменены.

px, em &% Значения могут быть использованы для конструкций экрана. Попробуйте разные значения и посмотрите. Спасибо.