Hi guys!
I'm trying my hand at making a mobile version of my web page, but I'm having a hard time getting it to do two things:
You can see my index page at heyhector.com.
My mobile version is at heyhector.com/mobile. (links are't working there yet)
If you could clear up why I couldn't get it to work I'd be so happy.
In your mobile page you have this in the head:
<link rel="stylesheet" href="mobile.css" media="only screen and (max-device width:480px)"/>
There's a space between max-device and width. it should be max-device-width.
For mobile, you should also have the following in the head of the page:
<meta name="viewport" content="width=device-width">
You would need some form of script to redirect the user to your mobile version of the site. Something like the below could be the solution.
<script type="text/javascript">
<!--
if (screen.width <= 480) {
document.location = "mobile/index.html";
}
//-->
</script>
As taken from here: http://css-tricks.com/snippets/javascript/redirect-mobile-devices/
North America
Europe, Middle East and Africa
Asia Pacific