CODEWITHSUNDEEP
htmlcss
user360907
user360907

Reputation:

My phone is not displaying the mobile oriented version of my site

I am using the following HTML on my site:

<head>
    <link rel="stylesheet" type="text/css" href="css/style.css" media="screen"/>
    <link rel="stylesheet" type="text/css" href="css/mobile.css" media="handheld"/>
</head>

The purpose of this is to switch between the desktop and mobile version of the site when the appropriate browser is detected. My problem is that my HTC Hero Android browser is not displaying the mobile version of the site, and is instead displaying only the desktop version. My browser is set to display the mobile version of a site where possible. What am I doing wrong here?

PS. The mobile site is only a tech demo for my coursework, and so it only needs to be viewable in my browser to show that there is a mobile version of the site (it's my CSS that's being evaluated).

Upvotes: 3

Views: 4456

Answers (6)

O. Kasule
O. Kasule

Reputation: 21

Just use this meta tag in your head section among the first tags.

meta name="viewport" content="width=device-width, initial-scale=1"

Upvotes: 0

Christophe
Christophe

Reputation: 4828

I played around with this as well and it didn't work. After searching on Google it appears media="handheld" is not supported everywhere or by every mobile.

But here you have a premium class that will help you out if you use PHP: http://codecanyon.net/item/php-mobile-phone-detection/98397

Upvotes: 0

Paul D. Waite
Paul D. Waite

Reputation: 98796

According to this page, Android’s browser doesn’t load stylesheets marked as media="handheld".

The code from my question on iPhone stylesheets should work for Android (although I haven’t tried it): How do I apply a stylesheet just to the iPhone (and not IE), without browser sniffing?

History: the handheld media type was invented and used before Apple released the iPhone, and its version of Safari. (Android, if I understand correctly, effectively uses the same rendering engine for its browser as Mobile Safari does.) The whole idea of Mobile Safari was that it rendered the internet like you’d see it on a desktop. If it had used handheld stylesheets, it would have been stuck with a very simplified look for websites that included them, as handheld stylesheets were targeted at old, really simple phone web browsers.

Upvotes: 1

austinbv
austinbv

Reputation: 9491

The easiest way I have found is to use simple device detection, I found a good article and code at http://mobiforge.com/developing/story/lightweight-device-detection-php.

The code they give is as follows

<?php

$mobile_browser = '0';

if(preg_match('/(up.browser|up.link|mmp|symbian|smartphone|midp|wap|phone)/i', strtolower($_SERVER['HTTP_USER_AGENT']))) {
    $mobile_browser++;
}

if((strpos(strtolower($_SERVER['HTTP_ACCEPT']),'application/vnd.wap.xhtml+xml')>0) or ((isset($_SERVER['HTTP_X_WAP_PROFILE']) or isset($_SERVER['HTTP_PROFILE'])))) {
    $mobile_browser++;
}    

$mobile_ua = strtolower(substr($_SERVER['HTTP_USER_AGENT'],0,4));
$mobile_agents = array(
    'w3c ','acs-','alav','alca','amoi','audi','avan','benq','bird','blac',
    'blaz','brew','cell','cldc','cmd-','dang','doco','eric','hipt','inno',
    'ipaq','java','jigs','kddi','keji','leno','lg-c','lg-d','lg-g','lge-',
    'maui','maxo','midp','mits','mmef','mobi','mot-','moto','mwbp','nec-',
    'newt','noki','oper','palm','pana','pant','phil','play','port','prox',
    'qwap','sage','sams','sany','sch-','sec-','send','seri','sgh-','shar',
    'sie-','siem','smal','smar','sony','sph-','symb','t-mo','teli','tim-',
    'tosh','tsm-','upg1','upsi','vk-v','voda','wap-','wapa','wapi','wapp',
    'wapr','webc','winw','winw','xda','xda-');

if(in_array($mobile_ua,$mobile_agents)) {
    $mobile_browser++;
}

if (strpos(strtolower($_SERVER['ALL_HTTP']),'OperaMini')>0) {
    $mobile_browser++;
}

if (strpos(strtolower($_SERVER['HTTP_USER_AGENT']),'windows')>0) {
    $mobile_browser=0;
}

if($mobile_browser>0) {
   // do something
}
else {
   // do something else
}   

?>

Then just include your css in the if statement at the bottom.

Upvotes: 0

Sotiris
Sotiris

Reputation: 40046

handheld is used to attach CSS file for mobile devices, but it isn't used by Android and iPhone.

source : http://www.rkblog.rk.edu.pl/w/p/optimizing-websites-iphone-and-android/

So you can use something like the following:

<link rel="stylesheet" href="css/style.css" media="screen and (min-device-width: 481px)" type="text/css" />
<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)" href="css/mobile.css" />
<link rel="stylesheet" href="css/mobile.css" media="handheld" type="text/css" />

Upvotes: 4

pestaa
pestaa

Reputation: 4749

I'm no expert in the topic, but my guess is that your phone uses a modern browser that acts like a desktop one, and chooses the wrong stylesheet.

A server-side script could easily determine the proper file depending on the User-Agent, but it may not be feasible in your scenario. It'd definitely save you hours of headache.

Upvotes: 0

Related Questions