www.webdeveloper.com
Results 1 to 9 of 9

Thread: Mobile view of a webpage?

  1. #1
    Join Date
    Sep 2010
    Posts
    27

    Arrow Mobile view of a webpage?

    Visit screenr.com on a desktop computer and then on an iPhone or iPod touch.

    When you visit it on your mobile phone it displays a mobile version of the desktop page, but it is not a redirect as the URL is the same on both.

    How would I do this on my website?

    Is it .htaccess?

  2. #2
    Join Date
    Nov 2010
    Location
    Los Angeles, CA
    Posts
    234
    They are detecting the user agent passed to the page then including markup/CSS for mobile if it matches their list of mobile user agents.

  3. #3
    Join Date
    Sep 2010
    Posts
    27
    Great! so how would i write this code? could you give me an example?

  4. #4
    Join Date
    Nov 2010
    Location
    Los Angeles, CA
    Posts
    234
    You're going to need a server side programming language like PHP/.NET/Coldfusion etc.
    The code would look something like
    if(user agent contains (list of mobile user agent flags like "iphone","android", etc.))
    print(<style type="text/css" href="mobile.css" />);
    //also print the markup

    else print(<style type="text/css" href="desktop.css" />);
    //also print the markup


    Alternatively you could use the media attribute of the link element to say that only devices whose width falls in a certain range should use this style sheet. But this won't help you with placing conditional markup.


    You can post in the forum of the server side language of your choice for further help.

  5. #5
    Join Date
    Sep 2010
    Posts
    27
    thanks! but, not being rude or anything but could you help me out a bit more? like give me a working example code or something?

    I have been looking on the internet for ages trying to figure out how this works...

  6. #6
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,125

  7. #7
    Join Date
    Dec 2010
    Posts
    10
    this php from googlecode will help detect if using a mobile device
    <?php

    /**
    * Mobile Detect
    *
    * @license http://www.opensource.org/licenses/mit-license.php The MIT License
    * @version SVN: $Id$
    */

    class Mobile_Detect {

    protected $accept;
    protected $userAgent;

    protected $isMobile = false;
    protected $isAndroid = null;
    protected $isBlackberry = null;
    protected $isOpera = null;
    protected $isPalm = null;
    protected $isWindows = null;
    protected $isGeneric = null;

    protected $devices = array(
    "android" => "android",
    "blackberry" => "blackberry",
    "iphone" => "(iphone|ipod)",
    "opera" => "opera mini",
    "palm" => "(avantgo|blazer|elaine|hiptop|palm|plucker|xiino)",
    "windows" => "windows ce; (iemobile|ppc|smartphone)",
    "generic" => "(kindle|mobile|mmp|midp|o2|pda|pocket|psp|symbian|smartphone|treo|up.browser|up.link|vodafone|w ap)"
    );


    public function __construct() {
    $this->userAgent = $_SERVER['HTTP_USER_AGENT'];
    $this->accept = $_SERVER['HTTP_ACCEPT'];

    if (isset($_SERVER['HTTP_X_WAP_PROFILE'])|| isset($_SERVER['HTTP_PROFILE'])) {
    $this->isMobile = true;
    } elseif (strpos($this->accept,'text/vnd.wap.wml') > 0 || strpos($accept,'application/vnd.wap.xhtml+xml') > 0) {
    $this->isMobile = true;
    } else {
    foreach ($this->devices as $device => $regexp) {
    if ($this->isDevice($device)) {
    $this->isMobile = true;
    }
    }
    }
    }


    /**
    * Overloads isAndroid() | isBlackberry() | isOpera() | isPalm() | isWindows() | isGeneric() through isDevice()
    *
    * @param string $name
    * @param array $arguments
    * @return bool
    */
    public function __call($name, $arguments) {
    $device = substr($name, 2);
    if ($name == "is" . ucfirst($device)) {
    return $this->isDevice($device);
    } else {
    trigger_error("Method $name not defined", E_USER_ERROR);
    }
    }


    /**
    * Returns true if any type of mobile device detected, including special ones
    * @return bool
    */
    public function isMobile() {
    return $this->isMobile;
    }


    protected function isDevice($device) {
    $var = "is" . ucfirst($device);
    $return = $this->$var === null ? (bool) preg_match("/" . $this->devices[$device] . "/i", $this->userAgent) : $this->$var;

    if ($device != 'generic' && $return == true) {
    $this->isGeneric = false;
    }

    return $return;
    }
    }
    http://www.jadii.com A free online PSD to XHTML converter

  8. #8
    Join Date
    Sep 2010
    Posts
    27
    I found the answer, i got it on my website. www.iblanky.co.cc

  9. #9
    Join Date
    Feb 2011
    Posts
    2
    I wanted to check out your site to see the solution but I can't find it. Perhaps you could post your solution on the forum.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles