Я создаю веб-сайт, ориентированный на мобильные устройства.
Новые телефоны чаще всего используют новые браузеры, поддерживающие html5 и css3.Очень часто у них есть сенсорные экраны.Вероятно, владелец iPhone4 или Galaxy не слишком беспокоится о размере страницы - так что, имхо, неплохо бы использовать jQueryMobile для такого пользователя.
С другой стороны, есть смартфоны, которые также имеют сенсорные экраны, норазрешение экрана слишком мало (то есть 240x320), чтобы использовать jQueryMobile.Есть также ряд телефонов, которые не имеют сенсорных экранов, а также есть ряд пользователей, которые отключают Javascript, чтобы не загружать js-файлы и экономить свои деньги.
Я пытался использовать Modernizr, чтобы определитьесли мобильный телефон поддерживает сенсорный экран, но, к сожалению, Modernizr.touch показывает только, если браузер поддерживает его.Известно, что CSS Media Query Modernizr.mq() используется для определения размера экрана и загрузки на него различных файлов CSS, но это решение не решает проблему с отключенным JavaScript и старыми браузерами, такими как IE8 .
Есть также хорошая статья http://www.alistapart.com/articles/return-of-the-mobile-stylesheet но, к сожалению, в ней есть идеи, а не реализация.
Вопрос: Я хочу загрузить jQuery mobileдля смартфонов с минимальной шириной 480 пикселей.В противном случае загрузите CSS по умолчанию.Можно реализовать это для максимально возможного количества мобильных браузеров?
Ответ (код результата) :
<html class="defcss">
<head>
<link href="/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="@Url.Content( "~/Scripts/yepnope.js" )"></script>
<script type="text/javascript">
//<![CDATA[
if (window.screen.availWidth > 450) {
document.documentElement.className = document.documentElement.className.replace(/\bdefcss\b/, '');
yepnope(['//code.jquery.com/jquery-1.6.4.min.js',
'//code.jquery.com/mobile/1.0rc3/jquery.mobile-1.0rc3.min.js',
'//code.jquery.com/mobile/1.0rc3/jquery.mobile-1.0rc3.min.css']);
}
//]]>
</script>