通过Mobile访问时加载Mobile Version，否则加载Desktop Version

Question

can someone exlpain me how i can call my Mobile Version of a Website only when i visit by Phone and my Desktop Version of the Website when i visit everything that's bigger then 500px?

I have created a Mobile Website and a Desktop Website seperatly. Is it possible to check the width with jQuery and then call either the Mobile or Desktop Version?

i tried it like this

on my Desktop Version:

<link rel="alternate" media="only screen and (max-width: 500px)" href="../FolderPath/index.html" >

on my Mobile Version:

<link rel="canonical" href="../FolderPath/index.html">

but i think i'm totally wrong.

hope someone can help me, thanks in advance :)

Answer 1

You can detect screen size with JavaScript and redirect user to mobile site if screen size is less than 500px

 <script type="text/javascript">
    if (screen.width <= 500) {
        document.location = "mobile/index.html";
    }
 </script>