How to load amp html in mobile version

Question

I have 2 html's like non-amp.html and amp.html.

I included

<link rel="canonical" href="app/templates/non-amp.html">

in my amp.html and

<link rel="amphtml" href="app/templates/amp-blog-list.html">

in my index.html.

When i kept my site in mobile view the desktop html (non-amp)is loading.Can anyone please suggest me help.Thanks.

Answer 1

think about how does your application or website know if a visitor is using a mobile or a desktop computer?

you need to write some code that detects if it is a mobile, tablet, desktop and further depending on your requirements.

then when a mobile device has been detected you can then write to the page the required code you want to show.

I would recommend having a look at the following Question on stack overflow as the answer you need has already been given here.

Answer 2

In mobile and Desktop both show the non amp pages :

<link rel="amphtml" href="app/templates/amp-blog-list.html"> This tag is for google to know the amp page in non amp file.

Once you come from google search in mobile devices your amp page is open in google iframe.