Как вы автоматически изменяете свою ширину веб-страницы?

В HTML, есть ли способ сделать веб-страницу развернутой на монитор пользователя? Например, у меня 15-дюймовый, но у кого-то еще 24 дюйма. Веб-страница будет маленькой на экране, но подойдет минимум. Как увеличить страницу до 100% или, может быть, 95%?Как вы автоматически изменяете свою ширину веб-страницы?

источник

2009-03-11 Anonymous

В мире нет программного обеспечения, размеры которого основаны на дюймах монитора. Вам нужны пиксели. – tsilb

Изменение размера браузера - это надежный способ раздражать CRAP из ваших пользователей. Я должен использовать инструмент отчетов о расходах, который делает это для меня. Те из нас, у которых большие мониторы, как правило, не хотят или нуждаются в максимальном увеличении окна. –

Geeze people, ПРОЧИТАЙТЕ вопрос, прежде чем публиковать глупые комментарии. –

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

Возможно, вы используете Firefox Web Developer plugin, который позволяет быстро изменить окно вашего браузера на конкретные размеры, чтобы вы могли видеть, как ваш макет выглядит разным размерам. https://addons.mozilla.org/en-US/firefox/addon/60

источник

2009-03-11 20:48:40

В вашем HTML:

<div id="content"> 
<!-- Some content in here --> 
<div>

Тогда в вашем CSS:

#content { 
    width:100%; 
}

или для большего контроля:

#content { 
    min-width:500px; 
    max-width:1000px; 
}

источник

2009-03-11 20:49:38

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

Если вы хотите, чтобы установить размер в пикселях по ширине пользователя, вы можете использовать JavaScript для установки ширины динамически:

<script type="text/javascript"> 
var userWidth = screen.width; 
var userHeight = screen.height; 
</script>

Однако, вероятно, вы должны использовать макет больше жидкости, которая будет автоматически расширяться используя ширину, указанную в процентах (например, установив ширину элемента с помощью CSS: width: 100%)

источник

2009-03-11 20:53:19

Никогда не делайте этого. Когда-либо. ИМХО, делать это немного менее раздражает, чем поп-нос, но только незначительно. Намного лучше доверять тому, что пользователь знает, как использовать его браузер, и изменит его собственное окно, если он не хочет прокрутки. – RBerteig

Ширина жидкости достигается с использованием единиц измерения или единиц измерения. Все дело в создании макета сайта на основе сеток и контейнеров. Read more.

источник

2009-03-11 20:53:42

HTML ist просто markup language, чтобы описать смысл (текстового) содержимого. Например, <h1>Foobar</h1> просто означает, что Foobar - это заголовок первого уровня, но ничего не говорит о стиле, которое должно отображаться.

Для оформления HTML-документа был введен Cascading Style Sheets (CSS). Но CSS также просто описательный язык и ничего не знает о user agent. (Можно просто описать, что конкретные элементы должны отображаться с определенной шириной и т. Д.)

Но JavaScript знает пользовательский агент. Вы можете использовать объект screen для получения width и height экрана или доступного viewport.

источник

2009-03-11 21:07:26 Gumbo

Я думаю, что есть некоторая путаница в вопросе о том, спрашивает ли Боб о фактическом размере монитора или о размере окна.

Джош Стодола и Рич Брэдшоу предложили ответ HTML/CSS, который использует проценты для создания жидкостного макета, который расширяется с окном. Следующий код суммирует этот метод, создавая два столбца, один занимает 80% текущего окна браузера, а другой занимает 20%. Размеры столбца изменяются, когда пользователь меняет размер окна.

<html> 
<head> 
<style type="text/css"> 
    #content1 { 
     background: #CC0000; 
     height: 300px; 
     width: 80%; 
     float: left; 
    } 
    #content2 { 
     background: #00CC00; 
     height: 300px; 
     width: 20%; 
     float: left; 
    } 
</style> 
</head> 
<body> 
<body> 

<div id="content1"></div> 

<div id="content2"></div> 

</html>

Rudd Zwolinski предоставил ответ, который ищет текущее разрешение пользователя. Другие уже опубликовали потенциальные неприятности, вызванные использованием этого метода, но я не знаю, возможно, вы делаете некоторые художественные заявления о размерах разрешения. Вот такой же код выше, используя этот метод:

<html> 
<head> 
<style type="text/css"> 
    #content1 { 
     background: #CC0000; 
     height: 300px; 
     float: left; 
    } 
    #content2 { 
     background: #00CC00; 
     height: 300px; 
     float: left; 
    } 
</style> 
<script type="text/javascript"> 
    var userWidth = screen.width; 
    var userHeight = screen.height; 

    function resizeContent() 
    { 
     document.getElementById("content1").style.width = parseInt(userWidth * 0.8); 
     document.getElementById("content2").style.width = parseInt(userWidth * 0.2); 
    } 
</script> 
</head> 
<body onload="resizeContent()"> 

<div id="content1"></div> 

<div id="content2"></div> 

</html>

Надеюсь, что это поможет.

источник

2009-03-11 21:09:59 attack

Gumbo, по «странице» вы имеете в виду содержимое веб-страницы или вы имеете в виду окно, содержащее страницу? Если вы имеете в виду окно, ответ НЕ. Если вы имеете в виду контент, вы можете использовать жидкие макеты; Google это.

источник

2009-03-11 21:23:16

Я понял, что OP означает окно. То же самое на «НЕ НУЖНО» Это меня раздражало, когда сайт сделал это. Кроме того, я благодарен, что IE/FF позволяет отключить эту функцию. – NotMe

Как вы автоматически изменяете свою ширину веб-страницы?

ответ

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