Масштабирование HTML-макета до размера экрана - PullRequest
Новая
       29

Масштабирование HTML-макета до размера экрана

2 голосов
/ 24 марта 2009

Не могли бы вы рассказать, как автоматически исправить HTML-макет с разрешением экрана? Например, я кодирую HTML в разрешении экрана 1024 на 768 пикселей. Если я переключусь на 800 на 600 пикселей, я хочу, чтобы мои окна HTML автоматически менялись, чтобы исправить экран.

Как я мог это сделать?

Ответы [ 4 ]

6 голосов
/ 24 марта 2009

По окну HTML , я предполагаю, что вы говорите о содержимом HTML, а не об окне браузера.

Если это так, то ключевыми словами, которые вы хотите сделать, являются liquid/fluid/elastic design.

Возможно, вы захотите прочитать Elastic Design от Патрика Гриффитса на сайте List Apart или поиск в Google для поиска жидкого дизайна .

3 голосов
/ 24 марта 2009

Вам не нужно использовать JavaScript. Просто установите ширину вашего элемента (div, table и т. Д.) На 100% в файле CSS. Затем он будет корректироваться в соответствии с шириной области просмотра. (то же самое относится и к высоте) 

<!-- in yourHtml.html file -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

  <head>
    <link rel="stylesheet" type="text/css" href="yourStyleSheet.css" />
  </head>

  <body>
    <div class="fullWidth">
      Your content
    </div>
  </body>

</html>

<!-- in yourStyleSheet.css file -->
div.fullWidth {
    width:100%; 
    height:100%; 
    background-color:#CCC;
}
0 голосов
/ 24 марта 2009

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

Если вам нужно получить размер окна браузера с помощью JavaScript, вот пример: 

function getClientSize() {
  var width = 0, height = 0;

  if(typeof(window.innerWidth) == 'number') {
        width = window.innerWidth;
        height = window.innerHeight;
  } else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
        width = document.documentElement.clientWidth;
        height = document.documentElement.clientHeight;
  } else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
        width = document.body.clientWidth;
        height = document.body.clientHeight;
  }

  return {width: width, height: height};
}

Чтобы программно определить изменение размера окна браузера, присоедините прослушиватель к событию window.onresize. Обратите внимание, что в следующем упрощенном примере неважно, подключен ли уже прослушиватель (вместо этого используйте addEventListener / attachEvent): 

window.onresize = function() {
    var size = getClientSize();
    alert("Width: " + size.width + ", Height: " + size.height);
}
0 голосов
/ 24 марта 2009

Если вы имеете в виду фактическое окно браузера, Javascript имеет screen.width и screen.height, которые возвращают текущее разрешение; см. примеры использования . На определенной веб-странице вы можете настроить запуск сценария по таймеру, чтобы проверить, изменились ли эти значения, и изменить размер окна, если они есть. Хотя это кажется странным достижением - разрешения экрана меняются очень редко, и вам придется оказаться на конкретной странице, которая содержит этот JS-скрипт, чтобы он работал. Также обратите внимание, что свойства width и height не учитывают расположение панелей инструментов, поэтому окно может исчезнуть за ними. Это также плохое поведение, поскольку автоматическое максимизация переопределяет то, что пользователь может предпочесть.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...