Гость
Целевая тема:
Создать новую тему:
Автор:
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / верстка для мобильных устройств / 16 сообщений из 16, страница 1 из 1
22.04.2013, 22:16
    #38235747
tors
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
верстка для мобильных устройств
Есть задача разработать мобильное приложение(phonegap)
Первым делом сверстать странички
Приложение для устройств с различным разрешением экрана
В идеале сверстать одну версию страниц для всех устройств

Адаптивная верстка?
В какую сторону двигаться?
C ув. Tors
...
Рейтинг: 0 / 0
22.04.2013, 22:24
    #38235756
Паганель
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
верстка для мобильных устройств
лучше поручить проф.верстальщику
ну как... для себя конечно полезно знать про всякие медиа, вьюпорты, масштабы и ориентации
лесс опять же помогает
но делать все это самому ну нафиг, если есть малейшая возможность - лучше отмазаться, честно, это ппц как тяжело
...
Рейтинг: 0 / 0
25.04.2013, 21:20
    #38240707
tors
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
верстка для мобильных устройств
сверстал приложенице под разрешение 480x800
но надо сверстать под :

автор480x800
540x960
800x1280 (needed only for Samsung Galaxy Note)
720x1280
1920x1080 (smartphones with Full HD)

Tablets
1280x800

притом, что девайс может иметь разную ориентацию

нужен ликбез :
как опредилить разрешение девайса, как масштабировать шрифты, картинки, дивы ...

зы завтра показываю свои художества, ж@#$а полная :(
...
Рейтинг: 0 / 0
25.04.2013, 22:31
    #38240747
Antonariy
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
верстка для мобильных устройств
torsкак опредилить разрешение девайсаТебе это не надо. Тебе надо только указать стили для разрешения, например, от 480 до 540, а браузер сам их применит. С ориентацией тоже самое.
...
Рейтинг: 0 / 0
25.04.2013, 22:41
    #38240753
tors
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
верстка для мобильных устройств
Тебе надо только указать стили для разрешения
как єто сделать универсально для всех типов устройств
(android, i-phone)
...
Рейтинг: 0 / 0
26.04.2013, 06:29
    #38240875
Antonariy
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
верстка для мобильных устройств
Дурацкий вопрос. Проблема как раз в обратном — как сделать под каждый отдельный тип устройства. У айфона, например, разрешение 640x1136, то есть почти 15" стандартного монитора втиснуты в 4" наладонника. Браузеры не умеют определять физический размер экрана (возможно я не прав, и device-width/height это то самое, но смущают пиксели ), поэтому твой "универсальный" дизайн, который нормально смотрится в смартфоне, на мониторе будет конского размера, и наоборот, нормальный дизайн для монитора на смартфоне будет мелким. Поэтому нужно очень тонко играться в пограничных значениях разрешений. 1024х768 это почти наверняка монитор 15", а 1136х640 это повернутый набок айфон, и хотя разрешение у них почти одинаковое, дизайн должен быть совсем разным. Однако если окно браузера на компе примет размеры 1136х640, то дизайн выскочит айфоновский. Впрочем, кроме верстальщиков, никто с браузерами так не играется.
...
Рейтинг: 0 / 0
26.04.2013, 09:59
    #38241026
BACH
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
верстка для мобильных устройств
Определить разрешение экрана с помощью js (screen.width screen.height) нет проблем. Отсюда можно определить и ориентацию. Но делать под каждое разрешение свою верстку по моему не совсем правильно, тем более под каждый браузер. Я бы попытался бы сделать единый дизайн (он обычно минималистичный) для всех мобильных устройств с базовым шрифтом. На крайний случай, если все будет не очень читаться в некоторых разрешениях, в зависимости от разрешения менял бы размер шрифта (меняя базовый) чтобы все было более менее читаемым. Посмотрите как сделаны мобильные версии vk одноклассников и прочих сайтов .
...
Рейтинг: 0 / 0
26.04.2013, 10:28
    #38241073
miksoft
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
верстка для мобильных устройств
AntonariyПоэтому нужно очень тонко играться в пограничных значениях разрешений.Не нужно, имхо. У многих планшетов/крупноформатных телефонов разрешение совпадает с таковым у нетбуков/дешевых ноутбуков. А уж FullHD сейчас каждый производитель стремится хоть в какую-нибудь модель да засунуть (от 4 дюймов до более 100). Мобильные устройства отличаются от настольных совсем иначе. Например, по юзер-агенту или сторонними средствами типа Яндекс.Детектор . Верстку с помощью @media тоже никто не отменял, насколько я в курсе.
...
Рейтинг: 0 / 0
26.04.2013, 13:36
    #38241441
Antonariy
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
верстка для мобильных устройств
miksoftА уж FullHD сейчас каждый производитель стремится хоть в какую-нибудь модель да засунуть (от 4 дюймов до более 100).В том-то и проблема, что невозможно с одним лишь @media определить, в 4 дюйма впихнуто это full hd или в 100.
...
Рейтинг: 0 / 0
26.04.2013, 13:39
    #38241446
miksoft
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
верстка для мобильных устройств
AntonariymiksoftА уж FullHD сейчас каждый производитель стремится хоть в какую-нибудь модель да засунуть (от 4 дюймов до более 100).В том-то и проблема, что невозможно с одним лишь @media определить, в 4 дюйма впихнуто это full hd или в 100.Если верить описанию @media, то как раз возможно. Ибо он зависит не от разрешения, а от браузера, который знает на какой платформе он установлен.
...
Рейтинг: 0 / 0
26.04.2013, 13:44
    #38241461
miksoft
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
верстка для мобильных устройств
Вот еще @import полезная штука.
...
Рейтинг: 0 / 0
26.04.2013, 14:56
    #38241632
Antonariy
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
верстка для мобильных устройств
miksoftЕсли верить описанию @mediaКакому месту описания конкретно?
...
Рейтинг: 0 / 0
26.04.2013, 15:09
    #38241660
miksoft
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
верстка для мобильных устройств
AntonariymiksoftЕсли верить описанию @mediaКакому месту описания конкретно?Да там не так уж велико описание, чтобы заблудиться...
http://htmlbook.ru/css/media Правило @media позволяет указать тип носителя, для которого будет применяться указанный стиль.
...
handheld - Наладонные компьютеры и аналогичные им аппараты.
...
Рейтинг: 0 / 0
26.04.2013, 16:09
    #38241825
Antonariy
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
верстка для мобильных устройств
miksoftAntonariyпропущено...
Какому месту описания конкретно?Да там не так уж велико описание, чтобы заблудиться...
http://htmlbook.ru/css/media Правило @media позволяет указать тип носителя, для которого будет применяться указанный стиль.
...
handheld - Наладонные компьютеры и аналогичные им аппараты.Это вы блуждаете, а я четко осознаю, что это правило дает информацию о типе устройства, а не его физических размерах. Диагонали handheld-аппаратов простираются от минимума до почти 14 дюймов (а таблетки даже больше), которым мелкоформатный дизайн ни к чему.
...
Рейтинг: 0 / 0
26.04.2013, 16:26
    #38241859
miksoft
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
верстка для мобильных устройств
AntonariyДиагонали handheld-аппаратов простираются от минимума до почти 14 дюймов (а таблетки даже больше)О, а можно примерчик актуального устройства такого калибра? я б себе купил, наверное...
А то все, что видно в продаже, размер имеет всего лишь до 11.6 дюймов. А ломовая цена и/или продажа в единичном количестве мест в итоге дают мизерную долю присутствия на руках у пользователей.
...
Рейтинг: 0 / 0
26.04.2013, 17:42
    #38241995
st_st
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
верстка для мобильных устройств
В реальном масштабе в 4-ый айфон максимум 480 "компьютерных" пикселей влезет в альбомном.
...
Рейтинг: 0 / 0
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / верстка для мобильных устройств / 16 сообщений из 16, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]