gpt4 book ai didi

html - Gmail 忽略媒体查询? - 创建一个仅限移动设备的 div

转载 作者:行者123 更新时间:2023-11-28 02:53:24 25 4
gpt4 key购买 nike

我正在尝试制作 <div>仅在移动设备上可见。

<head>里面我有标签:

<style>

@media only screen and (min-device-width: 481px) {
div[class="mobile-only"] {
height: 0px !important;
overflow: hidden !important;
}
}

@media only screen and (max-device-width: 480px) {
div[class="mobile-only"] {
height: auto !important;
overflow: auto !important;
}

</style>

在 HTML 中:

<div class="mobile-only">
<table...>
</div>

我已经尝试了无数(大致)不同的方法来让它工作,例如 display: none;但是 GMail 似乎完全忽略了媒体查询并显示了 <div>无论如何。

这有什么技巧吗?它适用于我的 Outlook 客户端。

最佳答案

您可以尝试以下方法:

HTML:

<div class="mobile-only" style="overflow:hidden; float:left; display:none; line-height:0px;"><br/>This is hidden on desktop!</div>

CSS:

@media only screen and (max-device-width: 480px) {
*[class="mobile-only"] {
overflow: visible !important;
float: none !important;
display: block !important;
line-height:100% !important;
}
}

并且如 html 电子邮件中的链接答案样式中所述,应将其设置为内联。

关于html - Gmail 忽略媒体查询? - 创建一个仅限移动设备的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38305080/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com