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

推荐订阅源

Attack and Defense Labs
Attack and Defense Labs
酷 壳 – CoolShell
酷 壳 – CoolShell
博
博客园_首页
博
博客园 - 司徒正美
月光博客
月光博客
Apple Machine Learning Research
Apple Machine Learning Research
T
Tailwind CSS Blog
Jina AI
Jina AI
GbyAI
GbyAI
Y
Y Combinator Blog
罗
罗磊的独立博客
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
P
Proofpoint News Feed
Last Week in AI
Last Week in AI
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
量
量子位
雷峰网
雷峰网
博
博客园 - 【当耐特】
H
Hackread – Cybersecurity News, Data Breaches, AI and More
The GitHub Blog
The GitHub Blog
S
Secure Thoughts
博
博客园 - 三生石上(FineUI控件)
Cyberwarzone
Cyberwarzone
NISL@THU
NISL@THU
J
Java Code Geeks
C
Cisco Blogs
人人都是产品经理
人人都是产品经理
Webroot Blog
Webroot Blog
腾
腾讯CDC
博
博客园 - 叶小钗
C
Cyber Attacks, Cyber Crime and Cyber Security
T
Troy Hunt's Blog
AI
AI
L
LangChain Blog
Know Your Adversary
Know Your Adversary
T
Tenable Blog
M
MIT News - Artificial intelligence
P
Privacy & Cybersecurity Law Blog
L
LINUX DO - 最新话题
Hugging Face - Blog
Hugging Face - Blog
F
Full Disclosure
P
Proofpoint News Feed
AWS News Blog
AWS News Blog
有赞技术团队
有赞技术团队
A
Arctic Wolf
Security Archives - TechRepublic
Security Archives - TechRepublic
S
Schneier on Security
Recent Commits to openclaw:main
Recent Commits to openclaw:main
W
WeLiveSecurity
The Cloudflare 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阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。