You can set canonical two ways: 1) inside the <head>
tags or 2) sent with the HTTP header of a HTML document. The #selector resides within the same HTML document, this is why you can not set more than one Header information in a HTML document. There is only one GET request and only one header information set. If you check the GET parameters of those HTTP request there are going to be identical, because they are pointing to the same HTML document.
Therefore, you are doing a bad canonical implementation in the mobile pages. You should only use:
<link rel="canonical" href="http://www.website.com">
Only if the amount of "duplicated content" is significant, if the mobile versions contain just a small proportion of content in relation to the desktop site (page) I would not bother.
In other words, If you decide to try canonicals using #seletors you will do the same or the equivalent as using only
<link rel="canonical" href="http://www.website.com">
in all mobile pages, because is the same HTTP request.
So, to answer your question you should do as stated on Google Developer Site
To help our algorithms understand separate mobile URLs, we recommend using the following annotations:
- On the desktop page, add a special link rel=”alternate” tag pointing to the corresponding mobile URL. This helps Googlebot
discover the location of your site’s mobile pages.
- On the mobile page, add a link rel=”canonical” tag pointing to the corresponding desktop URL.
You know now how to setup the rel="canonical" ;)