Mobile is not working on Amazon CloudFront

• 

  lifeslittlepursuits · Member · Jun 21, 2016 at 3:21 pm

  • Copy link
  • Add topic to favorites

  My client has a site that renders both desktop and mobile from the same domain. However, ever since they started using Amazon CloudFront which they are pleased with, mobile will not render properly. The mobile site does not render when the site is accessed from a mobile device and selecting the mobile link will access the initial page, but any other link that is accessed renders a desktop page. I must note that the mobile site was working perfectly before the introduction of CloudFront. We were using the WordPress Mobile Pack, but are now using the Mobile Smart Plugin. I believe the issue is that CloudFront rewrites the user agent. In an effort to identify the user agents, we have added the below to the .htaccess file.

  Options +FollowSymlinks
  RewriteEngine on
  RewriteBase /

  RewriteEngine On
  RewriteBase /

  RewriteCond %{HTTP_USER_AGENT} (android|bbd+|meego).+mobile|avantgo|bada/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)/|plucker|pocket|psp|series(4|6)0|symbian|treo|up.(browser|link)|vodafone|wap|windows ce|xda|xiino [NC,OR]
  RewriteCond %{HTTP_USER_AGENT} ^(1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-(n|u)|c55/|capi|ccwa|cdm-|cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do(c|p)o|ds(12|-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(-|_)|g1 u|g560|gene|gf-5|g-mo|go(.w|od)|gr(ad|un)|haie|hcit|hd-(m|p|t)|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c(-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac( |-|/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |/)|klon|kpt |kwc-|kyo(c|k)|le(no|xi)|lg( g|/(k|l|u)|50|54|-[a-w])|libw|lynx|m1-w|m3ga|m50/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|-([1-8]|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-[2-7]|i-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk/|se(c(-|0|1)|47|mc|nd|ri)|sgh-|shar|sie(-|m)|sk-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel(i|m)|tim-|t-mo|to(pl|sh)|ts(70|m-|m3|m5)|tx-9|up(.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas-|your|zeto|zte-) [NC]
  RewriteRule ^$ http://xxxxxxx.com/?mobile_switch=mobile [R,L]

  I also tried adding the code below to both the desktop header.php and mobile header.php files, but nothing has worked. Does anyone have any suggestions?

  <?php

  function custom_wp_is_mobile($includeTablets=false)
  {
  // See if we have the Cloudfront headers
  // See https://aws.amazon.com/blogs/aws/enhanced-cloudfront-customization/ for details.
  if (isset($_SERVER[‘HTTP_CLOUDFRONT_IS_MOBILE_VIEWER’])) {
  if($_SERVER[‘HTTP_CLOUDFRONT_IS_MOBILE_VIEWER’]==’true’){
  return true;
  } elseif($_SERVER[‘HTTP_CLOUDFRONT_IS_TABLET_VIEWER’] && $includeTablets){
  return true;
  }
  return false; // default
  } else {
  // Fall back to the standard wordpress function for these kind of things.
  return wp_is_mobile();
  }
  }

  ?>

  Any insight that can be provided is very much appreciated.

  The blog I need help with is: (visible only to logged in users)