Recently, I started looking into using AMP for my blog.
I started to read through the docs and look at some examples of it in use and it looks great and anything that improves performance, is a step in the right direction for me & I'd like to include it in my website pages.
The question I have - If I have a blog on my website at the url: www.example.com/blog (responsive design but looks best on desktop/laptop screens) and I'd like to use AMP for my mobile view, how does the browser I'm using on my phone (safari, chrome, ..) or on my computer (chrome, firefox, ..) know which page to serve up?
Does AMP recognise the width & height of your device and serve the mobile page, is there a certain viewport, that if you exceed, it will change based on that - or do you have to use @media queries (css link stylesheet or inline styling)?
Expanding on AMP question with media queries
Let's say I add a subdomain to my website to serve up my AMP blog - e.g. (www.blog.example.com/) - If I google on my phone for "example blog" will it find the mobile/desktop html views or likewise, if I google the same thing on my web browser on desktop, does it find/serve up the AMP page (www.blog.example.com/) or my main blog page (www.example.com/blog).
How does this work? And is there a preferred way to use & distinguish between AMP & normal html pages with css styling (that includes @media queries)?
For creating AMP page and linking with regular page you can use
<link rel="canonical" href="$SOME_URL">
pls refer https://www.ampproject.org/docs/guides/discovery. Hope this help!