Question

我正在为Android和iOS设备创建一个Web应用程序，并使用iScroll 4作为ui。

应用程序的布局在移动和平板电脑屏幕尺寸设备之间略有变化。

目前我正在使用PHP在网站的不同部分更改iScroll脚本。见下文......

<script>

    <?php if (is_home()) { ?> // if is home page

    var myScroll,
        myScrollSidebar,
        myScrollHome;

    <?php } else { ?> // else use this

    var myScroll,
        myScrollSidebar;

    <?php } ?>

    function loaded() {

        myScroll = new iScroll('content');
        myScrollSidebar = new iScroll('sidebar');

        <?php if (is_home()) { ?> // if is home page only

        myScrollHome = new iScroll('home', {
            snap: 'li',
            momentum: false,
            hScrollbar: false,
        });

        <?php } ?>

    }

    document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
    document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);

</script>

这有效！

对于平板电脑尺寸的设备，我在CSS中使用此媒体查询，这包括横向和纵向模式。见下文......

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)

这也很酷。

我的问题是 - 在平板电脑屏幕尺寸设备上，我需要两个滚动条用于我的侧栏，替换当前的单边栏滚动条'myScrollSidebar'

所以我需要更改上面的iScroll脚本......

var myScrollSidebar;

myScrollSidebar = new iScroll('sidebar');

到此......

var myScrollSidebarLeft,
    myScrollSidebarRight;

myScrollSidebarLeft = new iScroll('sidebar-left');
myScrollSidebarRight = new iScroll('sidebar-right');

在具有最小设备宽度的设备上

：768px和最大设备宽度：1024px。

我目前正在使用modernizer's测试：使用yep/nope脚本加载器进行媒体查询。见下文。

<script>
    yepnope({
        test : Modernizr.mq('only screen and (min-device-width : 768px) and (max-device-width : 1024px)'),
        yep  : 'js/tablet.js',
        nope : 'js/mobile.js'

</script>

这适用于我的jquery和javascripts，但由于某些原因，如果我使用yep / nope加载我的iScroll 4脚本，则iScroll脚本无法工作。

我还研究了用户代理条件PHP，使用Detect Mobile Browsers PHP脚本，见下文。

require_once('php/mobile_device_detect.php');
$iPad = mobile_device_detect(false,true,false,false,false,false,false,false,false);

<?php if ($iPad==true) { ?>

    // iPad Stuff here...

<?php } ?>

如果您只想检测iPad，这很好。我的问题是我需要按屏幕大小有条件地更改我的iScroll脚本，因为我也在使用Android平板电脑。

任何想法或指针都会非常棒。感谢。

@media查询的条件PHP - 有哪些选项？

0 个答案: