what if my AMP page is valid on one device and invalid on another?

Question

I have AMP pages which include amp-iframe.

One of amp-iframe validation rules is that it must be either 600px away from the top or not within the first 75% of the viewport when scrolled to the top – whichever is smaller. due to those docs: https://www.ampproject.org/docs/reference/components/amp-iframe

Currently i have a situation when my amp page is valid for some devices (iPhone4,5,6) and invalid for other (Nexus 7, Samsung Galaxy S5) just because those other have longer screens.

How will my pages be threatened in this case? As valid or invalid? Or as valid for some devices only?

Answer 1

As answered in Validate AMP Pages, if the AMP validation service detects that there’s something wrong with your page, it won’t get discovered and distributed by third party websites and won’t appear in the Google AMP Cache.

With this, to make your page valid with varying screen sizes, you may want to check Layout & Media queries for details on how to create responsive images by specifying the width and height, setting layout to responsive, and indicating with srcset which image asset to use based on varying screen sizes.

To include <1frames> in your page, you can set layout to responsive:

<amp-iframe width=300 height=300
    sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
    layout="responsive"
    frameborder="0"
    src="https://www.google.com/maps/embed/v1/place?key=AIzaSyDG9YXIhKBhqclZizcSzJ0ROiE0qgVfwzI&q=Alameda,%20CA">
</amp-iframe>

Hope that helps!

Answer 2

You can test whether your page will be treated as valid or invalid by loading it via the AMP Cache using the AMP Cache URL Format, e.g.:

• HTTP : https://cdn.ampproject.org/c/www.example.com
• HTTPs: https://cdn.ampproject.org/c/s/www.example.com

The AMP Cache will display a validation error if your page is treated as invalid.

However, in any case I'd strongly suggest fixing your iframes as your they won't work on all devices. A simple workaround is to provide a placeholder image:

<amp-iframe ...>
    <amp-img layout="fill"
        src="..."
        placeholder></amp-img>
  </amp-iframe>