Как масштабировать мобильный сайт, чтобы он подходил под многие размеры экрана и устройства - PullRequest
2 голосов
/ 09 ноября 2011

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

Как создать мобильный сайт, который будет хорошо смотреться на самых разных устройствах (от 3,7-дюймового дроида до 9,7-дюймового iPad)?

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

В данный момент я использую CSS3-свойство background-size, установленное в значение «cover», для масштабирования фона, а затем использую JS для масштабирования контента в зависимости от размера экрана.

Хотя я вижу несколько ТАКИХ вопросов по этому вопросу, ни один из них, кажется, не дает мне понимания, в котором я нуждаюсь.Любое направление будет с благодарностью.


Вы можете проверить мой прогресс на http://danielcampbell.net/RKAdler/

Чтобы просмотреть мой прогресс, как это может выглядеть на мобильном телефоне:

Откройте его в своей ячейке или загрузите мобильный визуализатор, например расширение Ripple для Chrome

. После установки перейдите на сайт RK Adler и включите Ripple, щелкнув его значок @ в правом верхнем углу и выбрав"включить".

1 Ответ

0 голосов
/ 09 ноября 2011

Старайтесь не использовать пиксели для основных макетов.Например, вместо определения ширины и высоты для элемента #wrapper используйте 100%.Все в этом элементе, который измеряется в процентах, будет масштабироваться вместе с ним.

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

Проверьте этисайты: Слайд-шоу от Netlash

Отличный пример и слайд-шоу об этом обязательно посмотрите их код демо

Поиск в Google - Google - твой друг!

...