Change site completely if browser size is small

Question

I am currently using media query in my css but my site is still looking bad. Is there a way to determine first the witdh of a browser and then load different index files?

To post some code here is my media query:

@media screen and (max-width: 600px) {
  .topbar{
    opacity: 0;
  } 
....
}

Answer 1

I would say do some more research on building your CSS but to answer your question:

<script type="text/javascript">
if (screen.width <= 699) {
document.location = "http://mobilesite.com";
}
</script>