Условный PHP для запросов @media - какие есть варианты? - PullRequest
Новая
       6

Условный PHP для запросов @media - какие есть варианты?

1 голос
/ 08 января 2012

Я создаю веб-приложение для устройств Android и iOS и использую iScroll 4 для пользовательского интерфейса.

Компоновка приложения незначительно изменяется для мобильных устройств и устройств с размером экрана планшета.

В настоящее время я использую 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');

при работе на устройствах с min-device-ширина: 768 пикселей и максимальная ширина устройства: 1024 пикселей.

В настоящее время я использую тест модернизатора : медиа-запрос с загрузчиком сценариев 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, но по какой-то причине, если я загружаю свой скрипт iScroll 4 , используя yep / nope, скрипт iScroll не работает.

Я также изучил условный PHP пользовательского агента, используя Обнаружение мобильных браузеров 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.

Любые идеи или указатели были бы самыми удивительными.Спасибо.

...