I am currently working on setting up a website where I want the page to initially appear zoomed out all the way using a viewport meta tag. Additionally, I would like to use a separate stylesheet for mobile devices. However, no matter what I try, the page does not render as expected. I have experimented with placing the link and meta tags in different locations within the head section, but it has not made any difference. The code is validating correctly through the w3c validator.
Below is the code snippet:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website</title>
<link href="mobile.css" rel="sylesheet" media="only screen and (max-device-width: 480px)">
<link href="desktop.css" rel="stylesheet" media="screen">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>