为智能手机加载jQuery移动

StackOverflow https://stackoverflow.com/questions/8325454

  •  26-10-2019
  •  | 
  •  

题

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

新手机大多数都使用支持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 但不幸的是，它基本上没有实施想法。

问题： 我想为具有最小宽度480px的智能手机加载jQuery移动设备。否则加载默认的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>
有帮助吗？

解决方案

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

有一些客户端脚本，但我尚未使用其中任何一个：

有关的：

还有平板电脑呢？

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top