惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

酷 壳 – CoolShell
酷 壳 – CoolShell
H
Hacker News: Front Page
P
Palo Alto Networks Blog
T
ThreatConnect
Apple Machine Learning Research
Apple Machine Learning Research
博
博客园_首页
T
True Tiger Recordings
P
Privacy & Cybersecurity Law Blog
B
Blog
IT之家
IT之家
Last Week in AI
Last Week in AI
F
Full Disclosure
Hacker News: Ask HN
Hacker News: Ask HN
C
Comments on: Blog
Microsoft Azure Blog
Microsoft Azure Blog
C
Cybersecurity and Infrastructure Security Agency CISA
Microsoft Security Blog
Microsoft Security Blog
博
博客园 - 【当耐特】
N
News and Events Feed by Topic
NISL@THU
NISL@THU
腾
腾讯CDC
雷峰网
雷峰网
Security Latest
Security Latest
李
李成银的技术随笔
M
Microsoft Research Blog - Microsoft Research
L
LangChain Blog
L
Lohrmann on Cybersecurity
cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
C
Check Point Blog
Y
Y Combinator Blog
Recent Announcements
Recent Announcements
博
博客园 - Franky
N
News | PayPal Newsroom
V
V2EX
A
About on SuperTechFans
The Register - Security
The Register - Security
月光博客
月光博客
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
Google Online Security Blog
Google Online Security Blog
MyScale Blog
MyScale Blog
Cisco Talos Blog
Cisco Talos Blog
Vercel News
Vercel News
WordPress大学
WordPress大学
C
Cyber Attacks, Cyber Crime and Cyber Security
The Hacker News
The Hacker News
IntelliJ IDEA : IntelliJ IDEA – the Leading IDE for Professional Development in Java and Kotlin | The JetBrains Blog
IntelliJ IDEA : IntelliJ IDEA – the Leading IDE for Professional Development in Java and Kotlin | The JetBrains Blog
爱范儿
爱范儿
A
Arctic Wolf
L
LINUX DO - 最新话题
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More

博客园 - zjhgx

hjdang 从jdk11升级到jdk25遇到的问题 腾讯云服务器遭受大量请求攻击导致网页打不开 capacitor的android项目接入穿山甲遇到的坑 class file for org.apache.shiro.lang.util.Nameable not found class file for org.apache.shiro.lang.util.Nameable not found 使用capacitor遇到的问题记录 shiro的cookie去掉domain后导致用户无法登陆 android真机调试遇到的问题 用java爬取京东商品页注意点 SEO 经验记录 使用goaccess统计nginx日志 nginx日志按天分割 记一次流量爆发导致服务器无响应的记录 mac 安装完Navicat Premium 提示已损坏 无法打开的处理方法 腾讯云问题汇总 vue-element-admin npm install 错误 Adsense遇到的问题 web项目启动时dubbo报错： No provider available for the service com.davidhu.shopguide.api.service.UserEventService from the url zookeeper ://localhost:2181/org.apache.du quasar ssr模式出现了CLS issue vue ssr里面在template不能出现this，create时this还没有
quasar <q-page>下面<div>自动计算height的问题
zjhgx · 2024-01-14 · via 博客园 - zjhgx

由于要解决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&amp;output=html&amp;h=200&amp;slotname=6650477400&amp;adk=3488760136&amp;adf=3452056682&amp;pi=t.ma~as.6650477400&amp;w=526&amp;fwrn=11&amp;fwrnh=100&amp;lmt=1705176099&amp;rafmt=1&amp;format=526x200&amp;url=https%3A%2F%2Fwww.hjdang.com%2Fd%2F1746216722043543554&amp;fwr=0&amp;fwrattr=true&amp;rpe=1&amp;resp_fmts=3&amp;sfro=1&amp;wgl=1&amp;uach=WyJtYWNPUyIsIjE0LjIuMSIsIng4NiIsIiIsIjEyMC4wLjYwOTkuMjE2IixudWxsLDAsbnVsbCwiNjQiLFtbIk5vdF9BIEJyYW5kIiwiOC4wLjAuMCJdLFsiQ2hyb21pdW0iLCIxMjAuMC42MDk5LjIxNiJdLFsiR29vZ2xlIENocm9tZSIsIjEyMC4wLjYwOTkuMjE2Il1dLDBd&amp;dt=1705176099850&amp;bpp=2&amp;bdt=318069&amp;idt=3&amp;shv=r20240109&amp;mjsv=m202401080101&amp;ptt=9&amp;saldr=aa&amp;abxe=1&amp;cookie=ID%3Ddaefebd3d133c581%3AT%3D1704470921%3ART%3D1705175584%3AS%3DALNI_MbdMv_25U53z_6P-qjgeXQnMXu2kQ&amp;gpic=UID%3D00000d389bb3e176%3AT%3D1704470921%3ART%3D1705175584%3AS%3DALNI_Ma4bEGfu9M5AZXY_tyK2MYMZ4tZ2g&amp;prev_fmts=0x0%2C726x280%2C234x600&amp;nras=1&amp;correlator=894032714487&amp;frm=20&amp;pv=1&amp;ga_vid=865370504.1688932039&amp;ga_sid=1705175783&amp;ga_hid=276704057&amp;ga_fc=1&amp;u_tz=480&amp;u_his=7&amp;u_h=932&amp;u_w=430&amp;u_ah=932&amp;u_aw=430&amp;u_cd=24&amp;u_sd=3&amp;dmc=8&amp;adx=12&amp;ady=487&amp;biw=430&amp;bih=932&amp;scr_x=0&amp;scr_y=0&amp;eid=44759875%2C44759926%2C95320239%2C31080264%2C31080410%2C44807406%2C95320378%2C95320894%2C95321626%2C31078663%2C31078665%2C31078668%2C31078670&amp;oid=2&amp;pvsid=3170054804342355&amp;tmod=1358442691&amp;uas=3&amp;nvt=2&amp;fc=1920&amp;brdim=0%2C0%2C0%2C0%2C430%2C0%2C430%2C932%2C430%2C932&amp;vis=1&amp;rsz=%7Cm%7CpEe%7Cp&amp;abl=XS&amp;pfx=0&amp;fu=1152&amp;bc=31&amp;td=1&amp;nt=1&amp;ifi=4&amp;uci=a!4&amp;fsb=1&amp;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>

此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。