Menu
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).
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" />
88
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
