【问题标题】:jQuery Mobile and HTML5 BoilerplatejQuery Mobile 和 HTML5 样板
【发布时间】:2012-01-06 17:01:06
【问题描述】:

有没有人知道如何让 jQuery Mobile 只在具有特定屏幕分辨率的页面上加载?如果有人从桌面/笔记本电脑浏览器查看页面,我不希望加载 jQuery Mobile,因为我想使用 HTML5 样板。

例如,如果有人从他们的 iPhone 访问我的页面,我希望 jQuery Mobile 使用我创建的主题来格式化网站,但如果他们从桌面查看它,我不希望 jQuery Mobile 添加所有额外的标签和东西。

谢谢

【问题讨论】:

    标签: jquery-mobile html5boilerplate


    【解决方案1】:
    <script type="text/javascript">
    <!--
    
    var fileref=document.createElement('script')
    fileref.setAttribute("type","text/javascript")
    fileref.setAttribute("src", "js/jqueryMobile.js")   
    
    if (screen.width <= 480) {
    document.getElementsByTagName("head")[0].appendChild(fileref);
    }
    //-->
    </script>
    

    【讨论】:

    • 谢谢你,大卫。这正是我想要的!
    【解决方案2】:
    <script type="text/javascript">
        <!--
        if (screen.width <= 699) {
        document.location = "mobile/index.html";
        }
        //-->
    </script>
    

    这段脚本将识别屏幕大小,在本例中为 699 像素,然后告诉服务器加载与根目录不同的文件夹。只需在您的服务器上为您的 jquery 移动站点创建一个名为 mobile 的文件夹即可。干杯!

    【讨论】:

    • 谢谢,David,但这是否意味着我必须管理两个不同的站点:1) 移动站点,2) 标准站点?我只想管理一个站点,但是当浏览器宽度为 480px 或以下时,它会加载 jQuery Mobile,否则我不希望它加载。
    • @user965879 很抱歉是新手,不知道如何发帖。我误解了你想做什么。我在下面添加了另一个答案,它将根据相同的 if 语句将脚本标记添加到您的标题中。
    【解决方案3】:

    jQM 文档:

    注意:此功能在测试版中已弃用,并在 1.0rc1 中删除。我们 建议改用 CSS3 媒体查询。支持旧版本 Internet Explorer,查看respond.js,一个快速且轻量级的 用于最小/最大宽度 CSS3 媒体查询的 polyfill。

    如果你还需要这个功能,你可以在这里找到代码: jquery.mobile.media.classes.js

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2016-12-29
      • 1970-01-01
      • 2013-12-23
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多