quasar <q-page>下面<div>自动计算height的问题
由于要解决adsense引起的CLS issue，根据 https://web.dev/articles/optimize-cls?utm_source=lighthouse&utm_medium=lr给出的建议，在广告的container上加上min-height。
<div v-if="$q.platform.is.mobile" class="adsenseunitdetail q-pa-xs" style="min-height: 340px !important" > <!-- in-article-aquare2 --> <ins class="adsbygoogle" style="display: block" data-ad-client="ca-pub-3935005489954231" data-ad-slot="6650477400" data-ad-format="auto" data-full-width-responsive="true" ></ins> </div>
这段代码在<q-page>下面，实际展现出来之后，页面代码会变成下面，因为会重新计算高度：
<div class="adsenseunitdetail q-pa-xs" style="min-height: 0px !important; height: auto !important;">
<ins class="adsbygoogle" data-ad-client="ca-pub-3935005489954231" data-ad-slot="6650477400" data-ad-format="auto" data-full-width-responsive="true" style="display: block; height: 200px;" data-adsbygoogle-status="done" data-ad-status="unfilled"><div id="aswift_1_host" tabindex="0" title="Advertisement" aria-label="Advertisement" style="border: none; height: 200px; width: 526px; margin: 0px; padding: 0px; position: relative; visibility: visible; background-color: transparent; display: inline-block; overflow: visible;"><iframe id="aswift_1" name="aswift_1" browsingtopics="true" style="left:0;position:absolute;top:0;border:0;width:526px;height:200px;" sandbox="allow-forms allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-top-navigation-by-user-activation" width="526" height="200" frameborder="0" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allow="attribution-reporting" src="https://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-3935005489954231&output=html&h=200&slotname=6650477400&adk=3488760136&adf=3452056682&pi=t.ma~as.6650477400&w=526&fwrn=11&fwrnh=100&lmt=1705176099&rafmt=1&format=526x200&url=https%3A%2F%2Fwww.hjdang.com%2Fd%2F1746216722043543554&fwr=0&fwrattr=true&rpe=1&resp_fmts=3&sfro=1&wgl=1&uach=WyJtYWNPUyIsIjE0LjIuMSIsIng4NiIsIiIsIjEyMC4wLjYwOTkuMjE2IixudWxsLDAsbnVsbCwiNjQiLFtbIk5vdF9BIEJyYW5kIiwiOC4wLjAuMCJdLFsiQ2hyb21pdW0iLCIxMjAuMC42MDk5LjIxNiJdLFsiR29vZ2xlIENocm9tZSIsIjEyMC4wLjYwOTkuMjE2Il1dLDBd&dt=1705176099850&bpp=2&bdt=318069&idt=3&shv=r20240109&mjsv=m202401080101&ptt=9&saldr=aa&abxe=1&cookie=ID%3Ddaefebd3d133c581%3AT%3D1704470921%3ART%3D1705175584%3AS%3DALNI_MbdMv_25U53z_6P-qjgeXQnMXu2kQ&gpic=UID%3D00000d389bb3e176%3AT%3D1704470921%3ART%3D1705175584%3AS%3DALNI_Ma4bEGfu9M5AZXY_tyK2MYMZ4tZ2g&prev_fmts=0x0%2C726x280%2C234x600&nras=1&correlator=894032714487&frm=20&pv=1&ga_vid=865370504.1688932039&ga_sid=1705175783&ga_hid=276704057&ga_fc=1&u_tz=480&u_his=7&u_h=932&u_w=430&u_ah=932&u_aw=430&u_cd=24&u_sd=3&dmc=8&adx=12&ady=487&biw=430&bih=932&scr_x=0&scr_y=0&eid=44759875%2C44759926%2C95320239%2C31080264%2C31080410%2C44807406%2C95320378%2C95320894%2C95321626%2C31078663%2C31078665%2C31078668%2C31078670&oid=2&pvsid=3170054804342355&tmod=1358442691&uas=3&nvt=2&fc=1920&brdim=0%2C0%2C0%2C0%2C430%2C0%2C430%2C932%2C430%2C932&vis=1&rsz=%7Cm%7CpEe%7Cp&abl=XS&pfx=0&fu=1152&bc=31&td=1&nt=1&ifi=4&uci=a!4&fsb=1&dtd=18" data-google-container-id="a!4" data-google-query-id="CLGX8P2T24MDFUYqewcdMR8Iug" data-load-complete="true"></iframe></div>
</ins>
</div>
但奇怪的是，在没有广告的情况下刷新页面确实会预留出空间，但如果不是刷新，而是页面点进去，预留的空间就没了，会看到明显的页面漂移现象。（ps：这里我就很疑惑？？，因为我看两者生成的代码是一样的，而且ins和ins下面的ifram都有height）后来仔细比对发现线上后者iframe 的height=0，而本地的iframe的height还是有值的，但还是不显示，可能是position的问题？
后来尝试把<div>改成<q-item>,这样quasar不会把样式修改为in-line style. 但是这样adsense报错：No slot size for availableWidth=0,原因是：About the responsive behavior of display ad units - Google AdSense Help
- The parent container has no width set. If you place your responsive ad code within a parent container that doesn’t have an explicit width set, for example, within a floating element, then our ad code won’t be able to calculate the required size for the responsive ad unit. In this case, you’ll need to modify your code and use CSS media queries to set the size of the parent container. Find out how to modify your responsive ad code.
- The parent container has fixed or limited height. Responsive ads should not be placed inside containers with a fixed or limited height, as they may be taller on some devices or browsers. If you need to limit the height of your responsive ads, you’ll need to modify your code and use CSS media queries to set the height of the parent container. Find out how to modify your responsive ad code.
这里说要用CSS media queries，经实验，解决方法是不要提供min-height，而是提供height，改成这样就可以了，：
<div v-if="$q.platform.is.mobile" class="adsenseunitdetail q-pa-xs mobile_adsense_dimension" > <!-- in-article-aquare2 --> <ins class="adsbygoogle mobile_adsense_dimension" style="display: block" data-ad-client="ca-pub-3935005489954231" data-ad-slot="6650477400" data-ad-format="auto" data-full-width-responsive="true" ></ins> </div> <div v-if="$q.platform.is.desktop" class="adsenseunitdetail q-pa-xs pc_adsense_dimension" > <!-- in-article-aquare2 --> <ins class="adsbygoogle pc_adsense_dimension" style="display: block" data-ad-client="ca-pub-3935005489954231" data-ad-slot="6650477400" data-ad-format="auto" data-full-width-responsive="true" ></ins> </div> .mobile_adsense_dimension height: 345px @media(min-width: 429px) height: 358px @media(max-width: 380px) height: 312px .pc_adsense_dimension height: 280px
注意 mobile_adsense_dimension和pc_adsense_dimension这两个class在ins标签上也要有。实际测试， 加上class之后quasar就不会加上 style="min-height: 0px !important; height: auto !important;" 了。但如果把class里面的样式从height
改成min-height则还是会改。而且奇怪的是，不用class，直接写in-line style，如下面。经本地测试，mobile的会被quasar改成"style="height: auto !important;"，pc的就不会，神不神奇？？可能两个元素位置不同有关吧。
<div v-if="$q.platform.is.mobile" class="adsenseunitdetail q-pa-xs" style="height: 345px" > <!-- in-article-aquare2 --> <ins class="adsbygoogle mobile_adsense_dimension" style="display: block" data-ad-client="ca-pub-3935005489954231" data-ad-slot="6650477400" data-ad-format="auto" data-full-width-responsive="true" ></ins> </div> <div v-if="$q.platform.is.desktop" class="adsenseunitdetail q-pa-xs" style="height: 280px" > <!-- in-article-aquare2 --> <ins class="adsbygoogle pc_adsense_dimension" style="display: block" data-ad-client="ca-pub-3935005489954231" data-ad-slot="6650477400" data-ad-format="auto" data-full-width-responsive="true" ></ins> </div>
喜欢艺术的码农
