Question

我正在建立一个面向移动的网站。

新手机最重要的是使用支持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>

Answer 1

我会调查服务器端并生成所需的文件，看看：

有一些客户端脚本，但我还没有使用它们中的任何一个：

为智能手机加载jQuery Mobile，否则加载默认css

1 个答案: