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

推荐订阅源

Y
Y Combinator Blog
cs.CV updates on arXiv.org
cs.CV updates on arXiv.org
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
The Cloudflare Blog
V
Visual Studio Blog
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
月光博客
月光博客
IT之家
IT之家
大猫的无限游戏
大猫的无限游戏
宝玉的分享
宝玉的分享
博
博客园_首页
V
V2EX
WordPress大学
WordPress大学
博
博客园 - 三生石上(FineUI控件)
钛媒体：引领未来商业与生活新知
钛媒体：引领未来商业与生活新知
L
LangChain Blog
aimingoo的专栏
aimingoo的专栏
F
Fortinet All Blogs
爱范儿
爱范儿
阮一峰的网络日志
阮一峰的网络日志
GbyAI
GbyAI
Recorded Future
Recorded Future
J
Java Code Geeks
Martin Fowler
Martin Fowler
小众软件
小众软件
人人都是产品经理
人人都是产品经理
Help Net Security
Help Net Security
The Register - Security
The Register - Security
B
Blog RSS Feed
Forbes - Security
Forbes - Security
T
Tailwind CSS Blog
C
CERT Recently Published Vulnerability Notes
P
Privacy International News Feed
D
DataBreaches.Net
博
博客园 - 【当耐特】
K
Kaspersky official blog
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
T
The Exploit Database - CXSecurity.com
L
LINUX DO - 热门话题
Jina AI
Jina AI
G
GRAHAM CLULEY
H
Help Net Security
D
Docker
Microsoft Security Blog
Microsoft Security Blog
S
Securelist
O
OpenAI News
U
Unit 42
V2EX - 技术
V2EX - 技术
腾
腾讯CDC
罗
罗磊的独立博客

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