Каков наилучший метод для поддержки размеров экрана в веб-приложении? - PullRequest
Новая
       17

Каков наилучший метод для поддержки размеров экрана в веб-приложении?

1 голос
/ 05 августа 2009

Каков наилучший подход для определения ширины страницы веб-приложения? Большинство наших пользователей имеют 19-дюймовые мониторы, но многие запускают приложения с 14-дюймовых ноутбуков, а некоторые имеют 24-дюймовые мониторы (предположим, что это максимальное разрешение). Насколько я знаю, два наиболее распространенных метода: использование fixed ширина страницы или динамическая (макс.) ширина (100%).

Есть проблемы с любым подходом. Если страница оптимизирована для фиксированной ширины для 14-дюймового ноутбука, тогда на больших мониторах будет много потраченного впустую пространства (например, даже если более 30% экрана пусто по бокам, пользователю придется прокручивать страницу вниз, чтобы получить контент.) Раньше я был сторонником динамическая ширина , пока не начал видеть страницы, которые выглядели великолепно на 14 "и 19" экранах, отображаемых на 24-дюймовые мониторы (основная проблема связана с выровненными по правому краю элементами, такими как кнопки, которые отделяются от основного содержимого).

В идеале, я бы хотел, чтобы ширина страницы была динамической (100%), пока она не достигнет определенного порога (скажем, 600px). Это возможно? Есть ли лучшая альтернатива?

ОБНОВЛЕНИЕ : Просто чтобы уточнить: я хочу, чтобы содержимое страницы имело ширину 100%, но в определенном диапазоне, скажем, 400px и 900px (чтобы пользователь мог видеть горизонтальную полосу прокрутки после изменения размера окно до ширины 300px, и по бокам будет пустое пространство, если окно будет изменено до ширины 1000px, но между 400px и 900px, содержимое будет автоматически корректироваться). Возможно ли это?

Ответы [ 5 ]

2 голосов
/ 05 августа 2009

Один из способов установить максимальную ширину для div или таблицы - использовать CSS-выражения 

div#myDiv
{
     max-width: 980px; 
     min-width: 980px; 
     width: 980px; 
     width: expression(Math.max(Math.min((document.documentElement ?   document.documentElement.clientWidth : document.body.clientWidth) - 20, 1000), 980)+'px');
}

Вы можете заменить 980 на 600 в вашем случае. Я часто буду создавать контейнерный div для хранения, скажем, верхнего и нижнего колонтитула, чтобы они расширяли всю ширину экрана, при этом используя дочерний div для содержания. Таким образом, вы можете ограничить содержимое (используя вышеприведенное выражение), одновременно позволяя ему расширяться / сжиматься в зависимости от размера экрана до указанной вами максимальной ширины.

******* ОБНОВЛЕНИЕ ********* Исходя из ваших пояснений к комментариям, этот пример кода должен делать то, что вы хотите, если я вас правильно понимаю. Верхний колонтитул страницы, нижний колонтитул и т. Д. Автоматически масштабируются по размеру экрана, в то время как содержимое ограничено максимальной шириной 600 пикселей, масштабирование уменьшается по мере необходимости. 

<html>
<head>
    <style>
    div#contentDiv
    {
        max-width: 600px;
        width:expression(document.body.clientWidth > 600? "600px": "auto" ); 
        border: red 1px solid;
    }
    div#wrapper {width: auto; border: blue 1px solid;}
    </style>
</head>
<body>
<div id="wrapper">
    <div id="contentDiv" style="height:686px; border: solid 1px red;"></div>
</div>
</body>
</html>
1 голос
/ 06 августа 2009

Дизайн для вашей аудитории, если 80% ваших пользователей используют большое разрешение, тогда оптимизируйте для этого. Google Analytics предоставит вам точную статистику по разрешениям браузера посетителя.

0 голосов
/ 10 августа 2009

Моя статистика говорит, что 1024x768 находится на вершине. Вот почему я использую ширину 960 пикселей для своих приложений. Когда статистика меняется, я меняю это значение на другое.

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

0 голосов
/ 05 августа 2009

В идеале, я бы хотел, чтобы ширина страницы была динамической (100%), пока она не достигнет определенного порога (скажем, 600px).

Для этого я бы, вероятно, сделал динамический макет, а затем внутри него был бы какой-то div (невидимый в заголовке или что-то в этом роде), фиксированный на 600px. Раскладка будет расширяться и сжиматься, но останавливаться при уменьшении до размера div: 


page
______________....
|                :
|[600px div]     : 
|                : 
| c o n t e n t  :
|_____________...:
0 голосов
/ 05 августа 2009

Фиксированная ширина около 720px в ширину.

Раньше я был парнем с переменной шириной, но в конце концов понял:

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

(В этом есть исследование - вашим глазам сложнее понять, к какой строке вы подходите, когда первое слово находится в футе слева от последнего слова предыдущей строки).

Интернет страницы могут отличаться от веб-приложений ; если на экране в основном таблицы, кнопки, графики, отчеты и т. д., возможно, вы захотите, чтобы максимальная ширина жидкости соответствовала как можно большему.

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

Похожие темы

...