为智能手机加载 jQuery Mobile，否则加载默认 css
我正在构建一个面向移动设备的网站。
新手机大多使用支持 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 但不幸的是它基本上只有想法而不是实现。
问题： 我想为最小宽度为 480px 的智能手机加载 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>
I'm building a mobile oriented web site.
New phones most of all use new browsers which support html5 and css3. Very often they have touch screens. Probably owner of iPhone4 or Galaxy does not bother about page size so much - so it IMHO it is a good idea to use jQueryMobile for such user.
On the other hand there are smartphones which are also have touch screens but screen resolution is too small (i.e. 240x320) to use jQueryMobile.
There are also a number of phones which do not have touch screens and also there are number of users who switch off Javascript to do not load js files and save their money.
I tried to use Modernizr to determine if mobile phone supports touchscreen but unfortunately Modernizr.touch only shows if a browser support it.
It is known to use CSS Media Query Modernizr.mq() to determine the screen size and load different css files base on it but this solution doesn't solve problem with switched off javascript and old browsers like IE8.
There is also a good article http://www.alistapart.com/articles/return-of-the-mobile-stylesheet but unfortunately it has basically ideas not implementation.
Question: I'd like to load jQuery mobile for smartphones with min-width 480px. Otherwise load default css. It is possible to implement this for as many as possible mobile browsers?
Answer (result code):
<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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我会研究服务器端的内容并生成所需的文件，请看一下：
有一些客户端脚本，但我还没有使用过其中任何一个：
相关：
平板电脑又如何？
I would look into something server side and generate the files needed, Take a look at:
There are some client side scripts but I haven't used any of them yet:
Related:
Also what about Tablets?