CODEWITHSUNDEEP
htmlcssamp-html
cala
cala

Reputation: 1421

Media queries with AMP for mobile webpages

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)?

Upvotes: 0

Views: 601

Answers (2)

Bachcha Singh
Bachcha Singh

Reputation: 3934

AMP does not recognise the width & height of your device and serve the mobile page it is depend upon canonical link

if you have only amp page?

<link rel="canonical" ref="https://www.example.com/your-amp-content-page.html">

if you have both amp and non amp pages?

Non AMP Pages

<link rel="amphtml" href="https://www.example.com/your-amp-content-page.html">

AMP Pages

<link rel="canonical" ref="https://www.example.com/your-non-amp-content-page.html">

For more information Click Here

Upvotes: 1

Selvam Elumalai
Selvam Elumalai

Reputation: 693

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!

Upvotes: 1

Related Questions