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

推荐订阅源

H
Hacker News: Front Page
S
Secure Thoughts
N
News | PayPal Newsroom
Exploit-DB.com RSS Feed
Exploit-DB.com RSS Feed
T
Threatpost
N
News and Events Feed by Topic
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
A
Arctic Wolf
Cisco Talos Blog
Cisco Talos Blog
V2EX - 技术
V2EX - 技术
L
LINUX DO - 热门话题
C
Cyber Attacks, Cyber Crime and Cyber Security
P
Proofpoint News Feed
TaoSecurity Blog
TaoSecurity Blog
N
News and Events Feed by Topic
cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
Hacker News - Newest:
Hacker News - Newest: "LLM"
NISL@THU
NISL@THU
H
Heimdal Security Blog
Webroot Blog
Webroot Blog
Martin Fowler
Martin Fowler
The Hacker News
The Hacker News
Engineering at Meta
Engineering at Meta
MongoDB | Blog
MongoDB | Blog
A
About on SuperTechFans
Stack Overflow Blog
Stack Overflow Blog
B
Blog RSS Feed
Vercel News
Vercel News
Blog — PlanetScale
Blog — PlanetScale
Google Online Security Blog
Google Online Security Blog
Schneier on Security
Schneier on Security
Cyberwarzone
Cyberwarzone
小众软件
小众软件
V
V2EX
K
Kaspersky official blog
Security Archives - TechRepublic
Security Archives - TechRepublic
博
博客园 - 三生石上(FineUI控件)
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
C
Cisco Blogs
S
Schneier on Security
Recorded Future
Recorded Future
阮一峰的网络日志
阮一峰的网络日志
AI
AI
Microsoft Security Blog
Microsoft Security Blog
H
Help Net Security
Simon Willison's Weblog
Simon Willison's Weblog
I
InfoQ
G
Google Developers Blog
博
博客园_首页
Hugging Face - Blog
Hugging Face - Blog

博客园 - 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阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。