Как web страницу подстроить под любой формат монитора?

@VolyaKat · Регистрация: 15.03.2011

Студворк — интернет-сервис помощи студентам

Добрый день всем! Я создала сайт в HTML коде. У меня на ноуте страница загружаестя идеально, но когда я просматриваю свой сайт на другом мониторе, то страница там отображается в гигантских размерах, и для того чтоб её просмотреть приходится пользоваться полосами прокрутки - что очень неудобно. Подскажите пожалуйста, как прописать в коде, чтоб страница подстраивалась под любой формат монитора?

@TopLoader · 22.12.2011, 12:02

Там от многих параметров это зависит.
Может, стоит начать с того, что ограничить сайт по ширине, сделать его "нерезиновым" (width: 960px)?

@Mi1ady · 23.12.2011, 03:03

HTML5
1
<body style="width:100%">

обычно помогает) Если остальная ширина задана не в абсолютных циферках) Иначе может что-нить куда-нить уехать)

@Samazar · 23.12.2011, 09:28

А я соглашусь с TopLoader, так как это самый простой и, имхо, изящный вариант решения данной проблемы. Создается дизайн из расчета на монитор 1024х768 (так как это самое распространенное разрешение), а если у кого-то монитор шире/больше, то по бокам добавляются пустые поля. Самый знаменитый пример - vkontakte

Есть конечно еще вариант на скриптах высчитывать размеры окна и исходя из этого подстраивать... но скажите, оно вам надо?

@DenQ · 23.12.2011, 10:22

Сообщение от Samazar

Есть конечно еще вариант на скриптах высчитывать размеры окна и исходя из этого подстраивать... но скажите, оно вам надо?

Вот как раз это я буду сегодня делать)) Делается это на js. Уже делал...

@Геннадий Никули · 23.12.2011, 20:53

В вашей таблице стилей, указывайте ширину не в px, а %

@psuz · 24.12.2011, 16:44

Чтобы не было такого, не надо height и width писать в пикселях, а только в процентах.

@DenQ · 24.12.2011, 16:52

Сообщение от psuz

Чтобы не было такого, не надо height и width писать в пикселях, а только в процентах.

Круто...

а если у пользователя маленький монитор, то будут не очень красиво... нужно выставлять min-width или же что намного гибче на js рассчитывать.. я сделал на js уже в который раз... работает даже если пользователь просто так взял и изменил размер окна... без перезагрузки странички.
Еще можно посоветовать html5. Но думаю это не ваш вариант.

@DenQ · 24.12.2011, 21:23

Сообщение от I$tep

Ну а где сам скрипт?

Я не обещал выкладывать скрипты, я лишь объяснил, что нужно сделать, по моему мнению.
Вот пример который должен направить на правильный путь

JavaScript
1
2
3
4
5
6
7
8
9
10
    function correctShow() {
        var widthTable = $('table.main').width()
        if (widthTable < 810) {
            $('table.main').width('810')
        }
    }
    correctShow()
    $(window).resize(function() {
        correctShow() 
    })

810 это допустим, 65% от рабочей области в браузере, когда окно открыто полностью. При создании таблицы полезно будет в стилях задать сразу

CSS
1
width: 65%;

, для стиля main нашей таблицы.

@VolyaKat · 26.12.2011, 13:43 **[ТС]**

Спасибо всем за советы, что-то попробую сделать!

@Анатолий Ин · 26.12.2011, 15:57

Предположения:
1. На ноуте разрешение большое, по этому страница полностью помещается.
2. На стацинарном компьютере страница может быть искусственно увеличена, попробуйте нажать Ctr+0(нуль) при просмотре страницы на стацинарном компьютере.

@DenQ · 26.12.2011, 16:07

Анатолий Ин, чушь, извините.

@Samazar · 26.12.2011, 16:10

Анатолий Ин, Мне кажется, ваше сообщение ошибочно. Обычно сразу видно нормальное масштабирование или нет. Кроме того, проблема не столько в разрешении, сколько в соотношении сторон. на ноутбуках широкоформатные дисплее. Но стационарниках обычно стоят 4:3. И из-за этой разницы и может ехать верстка.

DenQ, вообще это маловероятно, но вероятно же. У меня буквально на днях спрашивали "Как развернуть контакт? А то он у меня сжался до размеров барби-сайза". Так что это все-таки возможно.

@DenQ · 26.12.2011, 16:35

Сообщение от Samazar

Как развернуть контакт? А то он у меня сжался до размеров барби-сайза". Так что это все-таки возможно.

Не, ну про блондинок и со всем ламов... это уже другая песня...

Сообщение от Samazar

И из-за этой разницы и может ехать верстка.

Позволю себе не согласиться, верстка едет из-за кривых рук, и только из-за них)))
ЗЫ. Мой сайт, гугл первые несколько дней индексировал именно с крикой версткой главного меню, именно потому что я пренебрег тем что написал немного выше(5 пост).

@Samazar · 26.12.2011, 17:05

DenQ, тут тоже не соглашусь... если на css без js делать сайт через, к примеру, туже подложку, то сайт будет отображаться нормально на любом мониторе, вне зависимости "заходить с ноута" или же смотреть с ББ. В то время как чистую резинку без js реализовать уже будет сложно (если вообще возможно)...

@DenQ · 26.12.2011, 17:33

Сообщение от I$tep

Посмотреть можно?

Сайт еще в разработке, после НГ в соответствующем разделе выложу.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .
SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .

@VolyaKat 7 / 7 / 1 Регистрация: 15.03.2011 Сообщений: 106

	Как web страницу подстроить под любой формат монитора? 22.12.2011, 11:56. Показов 22698. Ответов 15 Метки нет (Все метки) Добрый день всем! Я создала сайт в HTML коде. У меня на ноуте страница загружаестя идеально, но когда я просматриваю свой сайт на другом мониторе, то страница там отображается в гигантских размерах, и для того чтоб её просмотреть приходится пользоваться полосами прокрутки - что очень неудобно. Подскажите пожалуйста, как прописать в коде, чтоб страница подстраивалась под любой формат монитора? 0

@TopLoader 43 / 43 / 6 Регистрация: 10.12.2011 Сообщений: 128
	22.12.2011, 12:02
	Там от многих параметров это зависит. Может, стоит начать с того, что ограничить сайт по ширине, сделать его "нерезиновым" (width: 960px)? 0

@Samazar 41 / 41 / 2 Регистрация: 02.11.2011 Сообщений: 193
	23.12.2011, 09:28
	А я соглашусь с TopLoader, так как это самый простой и, имхо, изящный вариант решения данной проблемы. Создается дизайн из расчета на монитор 1024х768 (так как это самое распространенное разрешение), а если у кого-то монитор шире/больше, то по бокам добавляются пустые поля. Самый знаменитый пример - vkontakte Есть конечно еще вариант на скриптах высчитывать размеры окна и исходя из этого подстраивать... но скажите, оно вам надо? 0

@Геннадий Никули 0 / 0 / 0 Регистрация: 23.12.2011 Сообщений: 9
	23.12.2011, 20:53
	В вашей таблице стилей, указывайте ширину не в px, а % 0

@psuz 1 / 1 / 1 Регистрация: 01.03.2011 Сообщений: 25
	24.12.2011, 16:44
	Чтобы не было такого, не надо height и width писать в пикселях, а только в процентах. 0

@VolyaKat 7 / 7 / 1 Регистрация: 15.03.2011 Сообщений: 106
	26.12.2011, 13:43 [ТС]
	Спасибо всем за советы, что-то попробую сделать! 0

@Анатолий Ин 1 / 1 / 0 Регистрация: 21.10.2011 Сообщений: 8
	26.12.2011, 15:57
	Предположения: 1. На ноуте разрешение большое, по этому страница полностью помещается. 2. На стацинарном компьютере страница может быть искусственно увеличена, попробуйте нажать Ctr+0(нуль) при просмотре страницы на стацинарном компьютере. 0

@DenQ Комбинатор 980 / 252 / 13 Регистрация: 10.03.2010 Сообщений: 3,556
	26.12.2011, 16:07
	Анатолий Ин, чушь, извините. 0

@Samazar 41 / 41 / 2 Регистрация: 02.11.2011 Сообщений: 193
	26.12.2011, 16:10
	Анатолий Ин, Мне кажется, ваше сообщение ошибочно. Обычно сразу видно нормальное масштабирование или нет. Кроме того, проблема не столько в разрешении, сколько в соотношении сторон. на ноутбуках широкоформатные дисплее. Но стационарниках обычно стоят 4:3. И из-за этой разницы и может ехать верстка. DenQ, вообще это маловероятно, но вероятно же. У меня буквально на днях спрашивали "Как развернуть контакт? А то он у меня сжался до размеров барби-сайза". Так что это все-таки возможно. 0

@Samazar 41 / 41 / 2 Регистрация: 02.11.2011 Сообщений: 193
	26.12.2011, 17:05
	DenQ, тут тоже не соглашусь... если на css без js делать сайт через, к примеру, туже подложку, то сайт будет отображаться нормально на любом мониторе, вне зависимости "заходить с ноута" или же смотреть с ББ. В то время как чистую резинку без js реализовать уже будет сложно (если вообще возможно)... 0