Css 媒体查询方向：android web 视图中的横向无法正常工作

Posted 2023-03-06

【中文标题】Css 媒体查询方向：android web 视图中的横向无法正常工作

【英文标题】：Css media query orientation:landscape in android web view not working properly

【发布时间】：2019-01-14 12:49:30

【问题描述】：

我有一个 android web 视图，我在其中放置了这个 html。

<style><!--
img
width: 100%;

.piccolo
font-size:3vw;
color:#000000;

.container
margin-left:2%;

.paragraph
padding-top:5px;
float:left;

@media (min-width: 800px) , (orientation:landscape)
.piccolo
font-size:2vw;
color:#000000;

.container
margin-left:2%;
display:flex;
padding:5px;

img
width:50vw;
float:left;

.paragraph
padding-left:10px;


--></style>
<br />
<h2 style="font-size: 6vw; text-align: center;">SOFTRAY ENGINEERING</h2>
<div class="container" style="padding: 10px;">
<div><img src="https://www.softray.it/wp-content/uploads/2018/07/experience.jpg"  /></div>
<div class="paragraph" style="float: right;"><span style="font-size: 4vw; color: #000000;"><span style="font-size: 4vw; color: #000000;">Il cambiamento &egrave; buono,</span> <br /> <span style="font-size: 4vw; color: #000000;">la trasformazione &egrave; anche meglio</span></span>
<p><span class="piccolo">SoftRay&nbsp;aiuta le aziende a ridefinire il modo con cui operare e servire i clienti. Offriamo tecnologie di business complete o integrabili&nbsp;per ottenere risultati tangibili per il cliente.</span></p>
<p><span class="piccolo">Vediamo digitale sia dalla prospettiva aziendale, sia da quella del consumatore.</span></p>
<p><span class="piccolo">Cliente Digitale, &egrave; dove stiamo cambiando come coinvolgere e interagire con i clienti finali, professionisti, pazienti e studenti.</span></p>
<p><span class="piccolo">Azienda Digitale, &egrave; dove stiamo aiutando le imprese a ripensare radicalmente le loro&nbsp;strategie e attivare nuovi modelli operativi e processi di business. Creare piattaforme di prodotto, migliorare analisi e capacit&agrave; di collaborazione hanno l&rsquo;obbiettivo di aumentare la produttivit&agrave;.</span></p>
</div>
</div>

在我输入(orientation:landscape) 之前，该查询仅适用于平板电脑而不适用于我的手机。 (orientation:landscape) 在我的手机中应用查询，即使它是纵向的。有什么帮助吗？

【参考方案1】：

通过输入(min-device-aspect-ratio: 1/1) and (orientation: landscape) 而不仅仅是(orientation:landscape) 解决了这个问题

【参考方案2】：

我认为浏览器由于逗号 (,) 而无法读取您的媒体查询。尝试使用这个

@media (min-width: 800px) and (orientation:landscape)  

【讨论】：

这不是逻辑与吗？如果我的设备是横向的，但没有达到 800 像素，我不会这样做。无论如何，我解决了它并且逗号有效。