разработка веб-интерфейсов для мобильных устройств

Question

Как сделать так, чтобы ваш сайт выглядел хорошо как в стандартном браузере, так и на различных мобильных устройствах?

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

Что бы вы порекомендовали?

Answer 1

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

Лучший сайт, с которым я сталкивался, занимаясь мобильным дизайном: http://patterns.littlespringsdesign.com/index.php/Main_Page

Answer 2

Я бы порекомендовал подход CSS. В противном случае, боюсь, у вас будет интерфейс, который будет выглядеть адекватно только в обоих случаях и только посредственно.

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

Answer 3

Я не знаю, понимаете ли вы, насколько велик вопрос, который вы задаете - «различные мобильные устройства»? Это множество устройств, множество разрешений, множество ошибок и ограничений - от айфонов, которые могут обрабатывать все, что может обрабатывать обычный браузер, до маленьких маленьких черно-белых экранов.

Теоретически вы можете написать отдельный CSS для целевых портативных устройств

<LINK REL="stylesheet" TYPE="text/css" MEDIA="handheld" HREF="handheld.css">

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

Вы можете посмотреть, насколько велика проблема, получив WURLF , который представляет собой XML-файл размером 13 МБ с информацией о различных устройствах и их возможностях.

Answer 4

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

Answer 5

Попробуйте новый инструмент Google Мобильный тест для оценки вашего сайта 1