IPB

Здравствуйте, гость ( Вход | Регистрация )

 
Ответить в данную темуНачать новую тему
> разные разрешения экрана, как приспособить сайт под разные разрешения экрана монитора
loalola
сообщение 4.6.2011, 22:47
Сообщение #1


newbie
*

Группа: User
Сообщений: 5
Регистрация: 30.5.2009
Пользователь №: 10604



Уважаемые форумчане - актуальный вопрос. Если кто знает, как это технически сделать - помогите мне, пожалуйста! smile.gif

Суть вопроса такова:
Сделала сайт, долго возилась с дизайном, и вот, наконец-то, достигла идеального, на свой взгляд варианта.
Все сверстано, разумеется, контент написан, остается только залить на сервер. И тут, как снег на голову, появилась
проблема, которую я не предусмотрела. Сайт прекрасно смотрится на экранах с шириной от 1440 px и больше, если
же брать меньшую ширину, то все отвратительно съезжает sad.gif
Причем я пробовала подстроиться, но поскольку сами картинки достаточно велики, то чисто технически с помощью HTML и
CSS ничего не поделаешь, в противном случае страдает сам дизайн.
Тогда я сделала второй вид страницы, более упрощенный и предусмотренный для меньших ширин экрана.
Суть вопроса такова:

КАК СДЕЛАТЬ ТАК, ЧТО ЕСЛИ У ПОЛЬЗОВАТЕЛЯ ШИРИНА ЭКРАНА ОТ 1440 И БОЛЬШЕ - ССЫЛКА ВЕДЕТ НА ОДИН ДОКУМЕНТ,
А ЕСЛИ МЕНЬШАЯ ШИРИНА - НА ДРУГОЙ ДОКУМЕНТ. Я уверена, что это возможно сделать технически! Но как?????????
Может надо задействовать Java- скрипт или Php. И какой должен быть тогда код??????

Очень прошу помочь мне, если кто владеет этим вопросом!!!! smile.gif
Перейти в начало страницы
 
+Цитировать сообщение
Ikar
сообщение 5.6.2011, 6:31
Сообщение #2


Professional
***

Группа: User
Сообщений: 1028
Регистрация: 3.6.2009
Из: г.Омск
Пользователь №: 10624



Цитата(loalola @ 4.6.2011, 23:47) *
Уважаемые форумчане - актуальный вопрос. Если кто знает, как это технически сделать - помогите мне, пожалуйста! smile.gif



КАК СДЕЛАТЬ ТАК, ЧТО ЕСЛИ У ПОЛЬЗОВАТЕЛЯ ШИРИНА ЭКРАНА ОТ 1440 И БОЛЬШЕ - ССЫЛКА ВЕДЕТ НА ОДИН ДОКУМЕНТ,
А ЕСЛИ МЕНЬШАЯ ШИРИНА - НА ДРУГОЙ ДОКУМЕНТ. Я уверена, что это возможно сделать технически! Но как?????????
Может надо задействовать Java- скрипт или Php. И какой должен быть тогда код??????

Очень прошу помочь мне, если кто владеет этим вопросом!!!! smile.gif


Думаю, сделать можно средствами php-скрипта какого-нибудь. Статистика LI, GA вроде с достаточной степенью точности определяют разрешение мониторов пользователя. Если скрипт будет получать данные из этой статистики и редиректить Юзера на соответсвующий вариант дизайна. Обдумайте ТЗ предложите прогерам такую задачку...


--------------------
Перейти в начало страницы
 
+Цитировать сообщение
Niagara
сообщение 6.6.2011, 12:41
Сообщение #3


MoneyMaker
**

Группа: User
Сообщений: 71
Регистрация: 24.11.2009
Из: Севастополь. Россия
Пользователь №: 11601



Цитата(loalola @ 4.6.2011, 23:47) *
Очень прошу помочь мне, если кто владеет этим вопросом!!!! smile.gif

Можно с помощью скриптов. Можно прогуглить, найдете, но это очень все заморочно, если Вы не владеете вопросом. Верстать таким образом - это прошлый век (имхо). Сверстайте все под наиболее популярное разрешение, в div-ах, разместите шаблон по центру (по размеру шапки) и будет прилично смотреться даже на больших экранах.
Ну или наоборот (если табличная верстка), жестко забить размеры, ничего разьезжаться не будет, это точно.
Перейти в начало страницы
 
+Цитировать сообщение
loalola
сообщение 10.6.2011, 8:03
Сообщение #4


newbie
*

Группа: User
Сообщений: 5
Регистрация: 30.5.2009
Пользователь №: 10604



Цитата(Niagara @ 6.6.2011, 12:41) *
Можно с помощью скриптов. Можно прогуглить, найдете, но это очень все заморочно, если Вы не владеете вопросом. Верстать таким образом - это прошлый век (имхо). Сверстайте все под наиболее популярное разрешение, в div-ах, разместите шаблон по центру (по размеру шапки) и будет прилично смотреться даже на больших экранах.
Ну или наоборот (если табличная верстка), жестко забить размеры, ничего разьезжаться не будет, это точно.


Да, Вы правы на счет прошлого века. rolleyes.gif Я погуглила и смотрю, что многие наступили на эти грабли.
Вывод один - надо с самого начала учитывать не только дизайн, но и как сайт будет смотреться
на разных разрешениях экрана.
Перейти в начало страницы
 
+Цитировать сообщение
loalola
сообщение 10.6.2011, 10:43
Сообщение #5


newbie
*

Группа: User
Сообщений: 5
Регистрация: 30.5.2009
Пользователь №: 10604



для тех, кто столкнулся с этой проблемой - нашла достаточно простой и рабочий
Java-скрипт. Вот код:

<script language=JavaScript>

if (screen.width < '1440') {document.write ('<LINK href="2.css" rel="stylesheet" type="text/css">');
}
else if (screen.width >= '1440') {document.write ('<LINK href="1.css" rel="stylesheet" type="text/css">'); }


</script>

Создается два css-документа! Например, 1.css и 2.css ( в моем случае)
Одна таблица стилей, если разрешение экрана меньше 1440 px ( смотрите код)
работает на это разрешение. Вторая таблица для разрешения большего или равного 1440 px.
Разумеется, что цифру 1440 надо подменить на свои значения.

Код вписывается внутри <head>. Я только что проверила код на работоспособность - все отлично!
Во всех браузерах читается нормально, только в Mozilla сначала выдает ошибку, но потом все равно
нормально грузится.

У этого приема есть только один недостаток - если у пользователя отключен в настройках JavaScript,
то и код этот, соответственно, не работает. Но, думаю, можно найти решение и этого вопроса smile.gif


Перейти в начало страницы
 
+Цитировать сообщение
coolgee61
сообщение 16.12.2014, 10:20
Сообщение #6


newbie
*

Группа: User
Сообщений: 1
Регистрация: 16.12.2014
Пользователь №: 17828



Причем я пробовала подстроиться, но поскольку сами картинки достаточно велики, то чисто технически с помощью HTML и
CSS ничего не поделаешь, в противном случае страдает сам дизайн.
Тогда я сделала второй вид страницы, более упрощенный и предусмотренный для меньших ширин экрана.
Суть вопроса такова:


--------------------
ahsan
Перейти в начало страницы
 
+Цитировать сообщение

Ответить в данную темуНачать новую тему
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0

 



RSS Текстовая версия Сейчас: 24.4.2018, 8:34