Как сделать так, чтобы веб-страница автоматически меняла ширину?
В HTML есть ли способ заставить веб-страницу расширяться до монитора пользователя? Как, скажем, у меня 15 дюймов, а у кого-то еще 24 дюйма. Веб-страница будет небольшой на их экране, но будет соответствовать мин. Как бы я увеличил страницу до 100% или, может быть, до 95%?
8 ответов
Ширина жидкости достигается с помощью процентных единиц или единиц измерения. Это все о создании макета сайта на основе сеток и контейнеров. Читать дальше
Гамбо, под "страницей" вы подразумеваете содержимое веб-страницы или окно, содержащее страницу? Если вы имеете в виду окно, ответ НЕ. Если вы имеете в виду контент, вы можете использовать жидкие макеты; Google это.
Если вы сами явно не установите размер, страница по умолчанию будет использовать всю ширину окна браузера.
Возможно, плагин Firefox для веб-разработчиков окажется полезным, так как он позволяет быстро изменить окно вашего браузера на определенные размеры, чтобы вы могли видеть, как ваш макет выглядит в разных размерах. https://addons.mozilla.org/en-US/firefox/addon/60
Если вы не укажете конкретную ширину для какого-либо элемента веб-страницы, такого как тело или элемент, содержащий div, он будет расширен до ширины окна браузера.
Если вы хотите установить размер в пикселях для ширины пользователя, вы можете использовать javascript для динамической установки ширины:
<script type="text/javascript">
var userWidth = screen.width;
var userHeight = screen.height;
</script>
Тем не менее, вам, вероятно, следует использовать более гибкий макет, который будет автоматически расширяться с использованием ширины, указанной в процентах (например, установка ширины элемента с помощью CSS: width: 100%)
В отдельной ветке, которая была помечена как дубликат, спрашивалось, как автоматически изменить размер вашего уже адаптивного веб-сайта, чтобы он соответствовал экранам мобильных устройств. Он не получил ответа, и, судя по тому, что я здесь вижу, эта ветка также не отвечает на вопрос.
Поскольку я недавно столкнулся с той же проблемой, я поделюсь тем, что обнаружил.
Для тех, кто использует HTML5 для кодирования своих страниц, чтобы ваша страница была «удобной для мобильных устройств», вы должны добавить этот код:
Если я оставлю приведенный выше код вне своих страниц, когда я загружу их на свой мобильный телефон, они автоматически изменятся в размере, чтобы соответствовать ширине экрана. Однако затем они не проходят тест на совместимость с мобильными устройствами. Если я вставлю приведенный выше код на свои страницы, мне придется вручную масштабировать свои страницы при загрузке их на свой мобильный телефон. Это было неприемлемо для меня. Он должен отображать всю страницу и позволять пользователю масштабироваться вверх, а не наоборот.
Решение, которое я нашел, которое удовлетворяет обоим, таково:
Для тех, кто искал это решение какое-то время (по крайней мере, последние 4 года с некоторых дат, которые я видел для этого вопроса), и еще не обнаружил его, добро пожаловать!
В вашем HTML:
<div id="content">
<!-- Some content in here -->
<div>
Тогда в вашем css:
#content {
width:100%;
}
или для большего контроля:
#content {
min-width:500px;
max-width:1000px;
}
Я думаю, что есть некоторая путаница относительно того, спрашивает Боб или нет о реальном размере монитора или размере окна.
Джош Стодола и Рич Брэдшоу предложили ответ 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>
Радд Зволински предоставил ответ, который ищет текущее разрешение пользователя. Другие уже опубликовали информацию о потенциальных неудобствах, вызванных использованием этого метода, но я не знаю, возможно, вы делаете какое-то художественное заявление о размерах разрешения. Вот тот же код выше с использованием этого метода:
<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>
Надеюсь, это поможет.
HTML - это просто язык разметки для описания значения (текстового) содержимого. Например, <h1>Foobar</h1> просто значит Foobar является заголовком первого уровня, но ничего не говорит о стиле, который должен отображаться.
Для оформления HTML-документа были введены каскадные таблицы стилей (CSS). Но CSS также просто описательный язык и ничего не знает о пользовательском агенте. (Вы можете просто описать, что определенные элементы должны отображаться с определенной шириной и т. Д.)
Но JavaScript знает пользовательский агент. Вы могли бы использовать screen объект для получения width а также height экрана или доступного видового экрана.