谷歌Amp广告设置在网站的PC端正常展示的解决方法

手动进行Amp广告设置。最近把网站升级到了AMP模式，按照官方提示放置自动amp广告代码，PC和手机版都没有自动展示。在Validator验证，amp4ads还是有很多错误，可能就是这个原因。由于Amp屏蔽了常规自动广告，所有自动的和手动设置的广告全部都失效了。但是AMP模式在移动端的效果确实优秀，决定放弃常规广告，转用手动amp广告设置。

首先，在Google AdSense按广告单元获取amp代码，选择有第一个amp标志的广告，第四个原生的amp界面比较烂我没有使用。

重点是接下来的广告尺寸设置。自适应和固定的区别。自适应的代码是这个样子：

宽度默认是视窗尺寸，高度统一320。自适应的放在页头或页脚，无论是pc或移动端，屏幕宽度是可以接受的，但放在其他位置的时候，pc端同样是全屏宽度，会遮住网站内容。如果用固定尺寸，pc端可以完美展示，但手机端不会自适应。那么选择固定尺寸来修改代码。下图所示是300-300的侧边栏固定尺寸广告代码。

接下来修改这段代码。查阅layout属性的值，除了fixed还有 container， fill， fixed-height， flex-item， intrinsic， nodisplay， responsive 等。具体可以查看此页面：AMPHTML Layout System – amp.dev

我们以上述侧边栏的amp代码为例，将layout值改为flex-item，去掉宽度width，高度改为240（高度值可以自定义），

这样的效果是，在pc端会自适应侧边栏的宽度，在移动端会自适应屏幕宽度。

还可以修改成其他的高度或者别的layout值。在文章内部的amp广告代码我把高度height改成了200，也会完美适应。下边的这个广告即是修改后的。

下边是关于layout各种值得动画演示，希望本文对你有所帮助。DEMONSTRATING AMP LAYOUT