Модифицируйте существующую веб-страницу с помощью мобильного CSS

Question

Какой хороший способ добавить CSS для мобильных устройств на существующую веб-страницу?

Требования:

• Просмотр в немобильном браузере должен оставаться без изменений
• Мобильные браузеры должны получить другой CSS (который удаляет определенные элементы и упрощает страницу)
• Интересуют мобильные браузеры: iPhone и Android.Win7 и WebOS было бы неплохо иметь
• Чем меньше количество изменений, тем лучше

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

Я надеюсь на решение только на стороне клиента (в отличие от обслуживания другой страницы).

Рекомендации?Есть ли фрагмент библиотеки / статьи / кода, который мне поможет?

Answer 1

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

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

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

@media handheld and (max-width: 480px), screen and (max-device-width: 480px), screen and (max-width: 600px)  {
    body {
        color: hotpink;
    }
}

Множество хороших примеров использования медиазапросов:
http://responsivewebdesigns.tumblr.com/

Answer 2

Лучший способ сделать это - использовать php для возврата разных css для разных браузеров.
пример:

<?php
header("Content-type: text/css");
$browser = get_browser();
if($browser['platform'] == 'iPhone')
    readfile("iPhone.css");
else
    readfile("normal.css");

Редактировать:
Вы можете сделать это и на стороне клиента.для обнаружения клиента в javascript вы можете использовать

if(navigator.userAgent.match(/iPhone/i))

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

$.include('somecss.css');

Все вместе:

<script>
    if(navigator.userAgent.match(/iPhone/i))
        $.include('iPhone.css');
    else
        $.include('Other.css');
</script>