Utilizing media queries in AMP for optimizing mobile website performance

Recently, I delved into the realm of utilizing AMP for my blog.

After perusing the documentation and observing examples of its application, I must say that anything enhancing performance is a welcome addition to me. Therefore, I am keen on incorporating it into my website pages.

The burning question I have - If I have a blog located at this URL: www.example.com/blog (optimized for desktop/laptop screens) and wish to implement AMP for mobile view, how does the browser determine which page to display on devices such as Safari, Chrome or even desktop browsers like Chrome, Firefox, etc.?

Does AMP automatically detect the device's dimensions to serve up the mobile version? Is there a specific viewport threshold that triggers the switch, or do I need to rely on @media queries either through CSS stylesheets or inline styling?

Further Exploring the AMP Question with Media Queries

Suppose I introduce a subdomain to house my AMP blog - e.g., (www.blog.example.com/) - When I search "example blog" on my phone, will the search results display the mobile/desktop HTML views? Similarly, if I conduct the same search on a desktop web browser, will it showcase the AMP page (www.blog.example.com/) or the main blog page (www.example.com/blog)?

How exactly does this system operate? And is there an optimal method for distinguishing between AMP and regular HTML pages with CSS styling (employing @media queries)?

htmlcssamp-html

Answer №1

If you want to create an AMP page and link it with a regular page, you can use the following code:

<link rel="canonical" href="$SOME_URL">

For more information, please visit . I hope this helps!

Answer №2

When it comes to AMP, the width and height of your device are not recognized, leading to the serving of a mobile page based on the canonical link.

What if you only have an AMP page?

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

And what if you have both AMP and non-AMP pages?

For Non-AMP Pages:

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

For AMP Pages:

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

For further details, please visit this link.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Updating the font style in MUI with React 18

I attempted to create a new theme in order to replace the default font family of MUI but unfortunately, it was not successful. This is what my theme component looks like: import { createTheme } from "@mui/material/styles"; const theme = createT ...

cssreactjsmaterial-uifont-family

Creating a border around an SVG element using the background color of its parent container

I am aiming to layer 2 SVGs on top of each other. The top SVG will have an outline to make it stand out more from the bottom SVG. These SVGs are embedded on buttons with transitions and hover colors. I want the outline SVG to match the background color of ...

cssmaterial-ui

Tips for making a slide-in animation that doesn't require adjusting the browser size

As I work on an animation where an img object and text slide in from outside the frame of the webpage upon page load, everything seems to be running smoothly. But there's one glaring issue: right at the start of the page load, the webpage resizes for ...

javascripthtmlcssreactjscss-animations

How can I use Angular to bind the text entered in an `input` within one `ng-repeat` `div` to another `div` within a different `ng-repeat`?

I am trying to create a dynamic Angular-based webpage where input tags are connected to h3 tags in separate DIVs. Below is the setup of my HTML page (as seen on Plunker): <!DOCTYPE html> <html> <head> <style type="text/css> ...

javascripthtmlangularjs

strange glitch found in jquery ui resizable

Experimenting with jquery UI, I came across an unusual bug. After clicking a button to make a div resizable, the div unexpectedly moves below the button. resizable.html: <html> <head> <link href="my.css" rel="stylesheet" type=" ...

jqueryhtmlcssjquery-uiresizable

Chart: Observing the Discrepancy in the Initial X-Axis Points

I'm working on incorporating multiple charts onto one page, with each chart centered and stacked one after the other. I've set a fixed width for the graph canvas. The challenge arises from the varying ranges of tick values - one chart may have a ...

javascriptcssflot

Modifying the color of the Payment Button in a Stripe Pop-up

I have successfully implemented the Stripe payment method on my leadpages, and everything is functioning well. However, I would like to customize the color of the Pay button to match the design in the attached image. Below is the code snippet used to disp ...

jqueryhtmlpopupstripe-payments

What steps are necessary to alter the background color of a jumbotron?

Can someone help me figure out how to change the background-color of the 'jumbotron' class in Bootstrap? The default color set in bootstrap.css is #eee. I've tried various methods like replacing it with none, none !important, or transparent ...

htmlcsstwitter-bootstraptwitter-bootstrap-3background-color

Incorporating Button Value from Anchor Tag Title Upon Page Load

Currently, I am working on a real estate project and facing an issue with a contact modal box. My goal is to extract the title from tag "a" and place it as the button value in the modal box. English isn't my strong suit, so please excuse any errors i ...

javascriptjqueryhtml

Is it possible to store Json data in a value attribute to showcase it in a form?

JSON data is coming to me and I need to input it into a text box for editing purposes. Here's an example: <div class="form-group"> <label class="control-label col-sm-2" for="email">Email:</label> <div class="col-sm-10"&g ...

htmljson

What is the best way to include the existing query string value in the hyperlinks on my page?

My main coding objective is to simultaneously search multiple websites. To accomplish this, I want to create a query string containing the search terms (primarily for analytics purposes) using a form. By utilizing JavaScript, I am aiming to include the s ...

javascriptjqueryhtmlarraysquery-string

How do I change the class of an element using $this?

Please review the code below: $(".nwe-cl-icontext").click(function () { $(this).parent().toggleClass("nwe-active"); }) .nwe-cl-c.nwe-active { background: red; } .nwe-cl-c { background: green; } <scrip ...

htmljquerycss

Is there a way to determine if two distinct selectors are targeting the same element on a webpage?

Consider the webpage shown below <div id="something"> <div id="selected"> </div> </div> Within playwright, I am using two selectors as follows.. selectorA = "#something >> div >> nth=1&q ...

javascripthtmltypescriptdomplaywright

Chrome's struggle with displaying multiple backgrounds on retina screens due to CSS complications

My goal is to create top and bottom shadows for a parent container when scrolling through the content. This effect works perfectly everywhere except on Chrome browser with retina screens, where it behaves strangely. The background becomes stuck at the top, ...

htmlcssgoogle-chromeretina-display

Incorporating jQuery to Load Content into a DIV while preserving the original JavaScript

I am attempting to implement the following <script> $(document).ready( function() { var data = 'testing' $("#about").on("click", function() { $("#main-content").load("/about.html"); ...

javascripthtmljquery

What is the best way to ensure that this jQuery window has a minimum size?

Recently, I came across a helpful jQuery demo that demonstrated how to create a popup window on my website. For those interested, the demo link can be accessed here: http://jqueryui.com/dialog/#modal-message The design of the window I am aiming to replica ...

javascriptjqueryhtmlcssjquery-ui

tips for creating dynamic visual effects using CSS on filtered images

img:hover{ -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); filter: grayscale(100%); } This CSS code snippet will convert the image from color to grayscale upon hovering. However, I am looking to achieve this effect with a smooth animation ...

css

The replace() function is failing to replace the provided inputs

Supposedly, when a user types in certain profanity and submits it, the word is supposed to be replaced with a censored version. Unfortunately, this feature is not working as expected. The word appears uncensored. Do you think implementing if/else stateme ...

javascripthtmlvariablesreplace

Changing the background color of a React styled-component when hovered over

Is there a way to create a custom div with an interactive hover effect that changes the background color? I am using styled components and passing in the color as props, but for some reason, the hover effect is not functioning correctly. const ColorBlock = ...

cssreactjshoverstyled-componentsbackground-color

``There seems to be an issue with the alignment and vertical placement in both Firefox and IE

I'm currently working on a responsive landing page for a company and running into an issue with the CTA button's position outside of Chrome. It's functioning perfectly in Chrome, resizing as intended: Here is the CSS responsible for this: ...

htmlcssresponsive-design