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

Question

В настоящее время у меня есть веб-приложение, которое использует Темы для оформления его как SkinA или SkinB. До сих пор это было веб-приложение, которое никоим образом не ориентировано на мобильные устройства, поэтому файл site.css (в обеих папках Theme) предназначен для обычных настольных устройств.

Однако, не изменяя ни одного из aspx-файлов веб-формы в рамках всего проекта, теперь мне нужно создать мобильную версию этого файла site.css (для обеих тем), которая изменит макет, чтобы он выглядел немного чище при просмотре на мобильные устройства.

Я нашел следующие фрагменты в статье, которые звучат довольно логично, однако из-за используемых папок Темы (и из того, что я понимаю о темах, я думаю, что все CSS-файлы включаются автоматически), я не уверен, как мне это сделать этот.

Выдержка из: http://mobile.smashingmagazine.com/2010/11/03/how-to-build-a-mobile-website/

Сначала определите две таблицы стилей: screen.css со всем для обычных браузеров и antiscreen.css, чтобы перезаписывать любые стили, которые вам не нужны на мобильных устройствах. Свяжите эти две таблицы стилей вместе в другой таблице стилей core.css:

@import url("screen.css");
@import url("antiscreen.css") handheld;
@import url("antiscreen.css") only screen and (max-device-width:480px);

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

<link rel="stylesheet" href="core.css" media="screen"/>
<link rel="stylesheet" href="handheld.css" media="handheld, only screen and (max-device-width:480px)"/>

Или, может быть, есть лучший способ сделать это, сохранив использование Тем?

Answer 1

Я сталкивался с этим в проекте, который я делаю в данный момент.

Один из способов сделать это - использовать Modernizr.

Это библиотека JavaScript, которую вы можете получить на modernizr.com.

Он протестирует целевой браузер и, если он поддерживает сенсорные события, добавит стиль "прикосновения" к элементу вашей веб-страницы. Как правило, если это делает Modernizr, то это либо планшет, либо телефон. Затем вы префикс каждого стиля вашего телефона / планшета css с ".touch".

Сопоставьте это с медиа-запросами, и вы сможете обрабатывать большинство (возможно, не все) устройства.