Mi teléfono no muestra la versión orientada a dispositivos móviles de mi sitio

Estoy usando el siguiente HTML en mi sitio:

    

El propósito de esto es cambiar entre la versión de escritorio y la versión móvil del sitio cuando se detecta el navegador apropiado. Mi problema es que mi navegador HTC Hero Android no muestra la versión móvil del sitio y, en su lugar, solo muestra la versión de escritorio. Mi navegador está configurado para mostrar la versión móvil de un sitio donde sea posible. ¿Qué estoy haciendo mal aquí?

PD. El sitio móvil es solo una demostración técnica para mi trabajo de curso, por lo que solo necesita ser visible en mi navegador para mostrar que hay una versión móvil del sitio (es mi CSS el que está siendo evaluado).

handheld se usa para adjuntar archivos CSS para dispositivos móviles, pero Android y iPhone no lo usan.

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

Entonces puedes usar algo como lo siguiente:

    

Según esta página , el navegador de Android no carga hojas de estilo marcadas como media="handheld" .

El código de mi pregunta sobre las hojas de estilo de iPhone debería funcionar para Android (aunque no lo he intentado): ¿cómo aplico una hoja de estilo solo al iPhone (y no a IE), sin olfatear el navegador?

Historia: el tipo de medio handheld fue inventado y utilizado antes de que Apple lanzara el iPhone y su versión de Safari. (Android, si entiendo correctamente, utiliza efectivamente el mismo motor de representación para su navegador que Mobile Safari). La idea de Mobile Safari era que representaba Internet como lo vería en un escritorio. Si hubiera utilizado hojas handheld estilo handheld , se habría quedado atascado con una apariencia muy simplificada para los sitios web que las incluían, ya que las hojas de estilo portátiles se dirigían a navegadores web antiguos y realmente simples.

No soy un experto en el tema, pero supongo que su teléfono utiliza un navegador moderno que funciona como uno de escritorio y elige la hoja de estilo incorrecta.

Una secuencia de comandos del lado del servidor podría determinar fácilmente el archivo correcto dependiendo del User-Agent, pero puede no ser factible en su escenario. Definitivamente te ahorraría horas de dolor de cabeza.

La forma más fácil que he encontrado es utilizar detección simple de dispositivos, encontré un buen artículo y código en http://mobiforge.com/developing/story/lightweight-device-detection-php .

El código que dan es el siguiente

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

Luego solo incluya su CSS en la statement if en la parte inferior.

Jugué con esto también y no funcionó. Después de buscar en Google, aparece media="handheld" no es compatible en todas partes ni en todos los dispositivos móviles.

Pero aquí tienes una clase premium que te ayudará si usas PHP: http://codecanyon.net/item/php-mobile-phone-detection/98397