Mobile view of a webpage?

[iBlanky]

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?

[Big O(1)]

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.

[iBlanky]

Great! so how would i write this code? could you give me an example?

[Big O(1)]

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.

[iBlanky]

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...

[cbVision]

Here's a good read:
http://www.smashingmagazine.com/2010...obile-website/

[mmendis]

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;
}
}

[iBlanky]

I found the answer, i got it on my website. www.iblanky.co.cc

[vvarrior]

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.