【发布时间】：2012-01-09 15:50:23
【问题描述】：
我正在构建一个面向移动设备的网站。
新手机大多使用支持 html5 和 css3 的新浏览器。他们经常有触摸屏。可能 iPhone4 或 Galaxy 的所有者不太关心页面大小 - 所以恕我直言，为此类用户使用 jQueryMobile 是个好主意。
另一方面，有些智能手机也有触摸屏，但屏幕分辨率太小（即 240x320）而无法使用 jQueryMobile。 还有一些手机没有触摸屏，也有一些用户关闭了 Javascript 以不加载 js 文件并节省资金。
我尝试使用Modernizr 来确定手机 是否支持触摸屏，但不幸的是Modernizr.touch 只显示浏览器 是否支持它。
众所周知，使用 CSS 媒体查询 Modernizr.mq() 来确定屏幕大小并根据它加载不同的 css 文件，但此解决方案无法解决 关闭 javascript 和旧浏览器（如 IE8） 的问题。
还有一篇不错的文章http://www.alistapart.com/articles/return-of-the-mobile-stylesheet，可惜基本没有实现思路。
问题： 我想为最小宽度为 480 像素的智能手机加载 jQuery mobile。否则加载默认 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>
【问题讨论】：
-
如果关闭 javascript，jQuery mobile 会有多好？
-
您没有提及您的网站使用哪种语言。如果有帮助，我有一个 php 脚本。只需添加一个 noscript 标签来告诉他们打开 javascript。
-
@Cymbals 实际上是 C#。但我不想显示消息，而是加载默认 css
-
@Leon 如果 JS 被禁用，那么只使用 HTML 版本（加载默认样式）当然没有任何 jq :)