We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 6681
    • 14 Posts
    Hi guys,

    I want to create a snippet that does the following:

    1. Gets the users browser information

    2. Checks to see if the browser is on an I phone or Ipad

    3. if the user IS using an Apple mobile product (Iphone or Ipad) it automatically forwards them to page A

    4. If the user is not using an Apple product (Iphone or Ipad) it automatically forwards them to page b

    The reason for this is that I am creating a Flash presentation and Apples Ipad and Iphone seem not to support flash so I want to forward these users to a flash free version of the presentation.

    I’m guessing it’s gonna be a simple user agent query followed by a string search followed by an If / Else statement but PHP is not my strong point so if any bod has a snippet I can call that does this I would be very grateful.

    Thanks for your help,

    DP
      • 22840
      • 1,572 Posts
        • 3112
        • 11 Posts
        This works if you only need to adjust css for iphone and ipad.

        <link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="/assets/css/iphone.css" type="text/css" />
        <link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="/assets/css/ipad.css" type="text/css" />


          • 32316
          • 387 Posts
          I would think that it would be better to check for flash support - that way not only would iThingies get the alternate site but so would anyone else without flash.

          Unfortunately I do not have a tested way to do this - since I don’t do flash I have not had a need - but a quick search turned up several ways (such as a javascript that asks for the version of flash) but not having used any I don’t feel good recommending one. Happy searching.

          A couple links:
          http://code.google.com/p/swfobject/
          http://www.adobe.com/devnet/flashplayer/articles/alternative_content.html
            • 9995
            • 1,613 Posts
            in css, when iphone/ipad display:none for div with flash, and the html content in your template set as style="display:none;" and in the ipad/iphone cssfile display:block!important
              Evolution user, I like the back-end speed and simplicity smiley
              • 33974
              • 156 Posts
              You can use this code as a MODX plugin to detect e.g. ipads:

              <?php
              $isIpad     = stripos($_SERVER['HTTP_USER_AGENT'], 'iPad') !== false ? true : false;
              $redirectOnIpadTo = $modx->getOption('redirectOnIpadTo', $scriptProperties, false);
              $redirectOnIpadTo = $redirectOnIpadTo == $modx->resource->get('id') ? false : $redirectOnIpadTo;
              
              $modx->setPlaceholder('isIpad', $isIpad);
              
              if ($isIpad == true && (int)$redirectOnIpadTo > 0) {
                  $modx->sendRedirect($modx->makeUrl($redirectOnIpadTo));
              
              }
              return;
              
                • 33657
                • 128 Posts
                  • 36632
                  • 202 Posts
                  Peter Bockenthien Reply #8, 15 years ago
                  I use CustomCSS as it works in both Evo and Revo:

                  <?php
                  /* Snippet Title: CustomCSS  */
                  
                  $output = '';
                  $cssBase = $modx->config['site_url'] . 'one/css/';   /* or wherever you keep your css files */
                  
                  /* array of browser agent names and their respective .css filenames */
                  
                  $browserArray = array(
                       'iPhone' => 'mobile-screen.css',
                       'SymbianOS/9.1' => 'mobile-screen.css',
                       'anotherbrowser' => 'mobile-screen.css',
                       'yetanother browser' => 'mobile-screen.css'
                  );
                  
                  /* see if we recognize one */
                  foreach ($browserArray as $key => $value) {
                      if (strpos($_SERVER['HTTP_USER_AGENT'],$key)) {
                          $output .= $cssBase . $value;
                          break;
                      }
                  }
                  
                  /* if we didn't find one, use the default css file */
                  if ($output == '') {
                      $output = $cssBase . 'screen.css';
                  }
                  
                  return $output;


                  It's called in the Template:
                  <link href="[[!CustomCSS]]" rel="stylesheet" type="text/css" />

                  Note: I use a CSS reset file that resets all the CSS attributes to zero, then invokes the CSS file for whatever user agent I want to use.

                  Refer to Ethan Marcotte's "Responsive Web Design" to find out how to style your main template so that, using CustomCSS, it responds to different browser screens rather than redirect to a mobile only site.