2011-01-24 5 views
5

Мне было интересно, что вы, ребята и девочки, порекомендовали бы как наиболее эффективные, чтобы динамически масштабировать веб-сайт на основе разрешения?Лучший способ динамического масштабирования страницы?

Есть ли что-нибудь, что перекрашивает элементы И изображения? Или мне нужно делать это отдельно? Я пытался использовать проценты и em, но это кажется огромной проблемой. Есть ли сценарии? Я искал довольно долгое время и не нашел ничего подходящего.

+1

Это ** - это огромная проблема. – Pointy

+0

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

+0

Не можете ли вы просто положиться на ctrl/+, ctrl/- и ctrl-0 для масштабирования? Просто убедитесь, что ваш макет жидкий, и он должен масштабировать prety хорошо –

ответ

3

Новые Media Queries выгружены в CSS3 спецификации. Вы можете прочитать удивительный article по этому вопросу от A List Apart Magazineexample, попытайтесь изменить размеры окна браузера)

Там также существующие scripts конечно.

+0

Очень полезно, спасибо! – Johannes

1

Лучший способ определить ориентацию устройства - использовать метатеги. Метатег viewport используется Safari/chrome на iPhone и iPad, чтобы определить, как отображать веб-страницу. Ниже приведены свойства видового

Ширины окна просмотра по ширине устройства, добавив следующее объявление в голова вашего HTML-файл

<meta name="viewport" content="width=device-width"> 

Для установки начального масштаба до 1.0, добавьте в головка вашего HTML-файла:

<meta name="viewport" content="initial-scale=1.0"> 

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

Используйте метатег viewport, чтобы улучшить представление вашего мобильного браузера. Этот метатег устанавливает ширину и начальную шкалу окна просмотра. Добавьте соответствующие метаданные в окно просмотра, чтобы сообщить браузеру о том, что ваш контент будет представлен как можно больший контекст на экране устройства. Если вы не установите ширину окна просмотра, страница будет увеличена, когда она будет загружена.

Полноэкранный режим

<meta name="apple-mobile-web-app-capable" content="yes"> 

Если содержание установлено Да веб-приложение работает в полноэкранном режиме; в противном случае - нет. Вы можете определить, будет ли веб-страница отображаться в полноэкранном режиме, используя свойство window.navigator.standalone только для чтения Boolean JavaScript.

Смежные вопросы