I've recently taken command of a site built with CodeIgniter. I am currently tasked with taking a particular page and making two variants of it: one for desktop browsers and one for mobile browsers.

I'm wondering if anyone can recommend a good approach for this. E.g., should I sniff the user agent in the controller? in the view? I posted about user agent sniffing to detect tiny browsers a few years back and got some good info but it doesn't seem complete and/or authoritative. I'm wondering if the situation has improved.

Do I need to write some kind of fancy preg_match for the user agent or is there some neat CodeIgniter or PHP library that has a function like is_mobile_browser which returns true or false?

Ideally the mobile and desktop pages would have entirely different HTML content. Minimally, I will include the viewport meta tag as described in this post.

    8 days later

    OK Nog thanks a billion for the user agent tip. I am now looking into the layout of the page, trying to get some CSS that adjusts depending on the phone orientation. I'm really hoping to avoid using javascript. So far I think I'm getting close but really want this to look good.

    I've provided some screenshots on an iPod touch (320x480 screen) and have a few issues:
    I wish the image would be larger and/or centered on bigger screens (like my Nexus S)
     Note in the landscape screenshot that the address font appears largish -- almost as large as the company name -- and that the font spills off the screen. Also I want the image to snuggle more cozily to the left to leave more room for the text.
    * If the textual information is taller than the image, i don't really want the text wrapping around the image. Image left, text right is the desired layout.

    I'm trying to strike a balance between using percentage widths for auto-scaling and pixel widths to prevent the image from consuming the entire tiny iPod Touch screen. The goal is:
    In portrait, have image top and address bottom
     In landscape have image left and address right

    Here's the HTML code:

    <!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Example Tag Page</title>
    <style>
body {
  width:100%;
  padding:0px;
  margin:0px;
  font-family: "Trebuchet MS", sans-serif;
}
p {
  margin: 2px 0px;
}
#customer_image_div {
  width:100%;
  height:50%;
  max-width:320px;
  max-height:320px;
  margin:none;
  text-align:center;
/*  background-color:red; */
  float:left;
}
#customer_image {
  max-width:98%;
  max-height:200px;
}
#customer_info {
  font-size:12px;
  margin:5px;
}
#customer_url {
  color:#7E0000
}
#customer_name {
  font-size:20px;
  font-weight:bold;
}
    </style>
  </head>
  <body>
    <div id="customer_image_div"><img id="customer_image" src="images/boomcycle_sample_image.jpg"></div>
    <div id="customer_info">
      <p id="customer_name">Extraordinary Lengthy Company Name</p>
      <p id="customer_address">1234 Main Street<br>
Los Angeles, CA  90025</p>
      <p id="customer_phone">(818) 555-1234</p>
      <p id="customer_url">www.companyname.com</p>
    </div>
  </body>
</html>

      have you considered using css media queries - @media?

      I believe it's supported by chrome, safari, firefox, opera & ie9. You'll have do a little js for ie8 and below but I think for what you're doing media queries would be a good fit.

      example:

      <style>
@media screen and (orientation:portrait){
 body{color:green;}
}

@media screen and (orientation:landscape){
 body{color:red;}
}

<!-- or -->

@media screen and (max-width: 320px) {
 body{color:blue;}
}

@media screen and (min-width: 321px) and (max-width: 480px) {
 body{color:black;}
}
</style>

        Now that looks handy, but I haven't seen it before. I'll have to look into that.

        EDIT: Because this problem is for mobile phones, do we have any idea how many phone browsers support this functionality? Is there some way to 'weed out' those that don't?

        Also, what about the iPod touch Safari in landscape mode ignoring font sizing? (see screenshot above). That looks a pretty ugly little problem.

          sneakyimp wrote:

          Because this problem is for mobile phones, do we have any idea how many phone browsers support this functionality?

          The W3C have a test harness and results that they have collected over the past five years or so.

            Write a Reply...