媒体查询在桌面上工作，但在移动设备上不工作

Posted 2023-03-06

【中文标题】媒体查询在桌面上工作，但在移动设备上不工作

【英文标题】：MediaQueries working on desktop but not on mobile

【发布时间】：2015-12-18 02:54:56

【问题描述】：

我知道这个问题已经被问过很多次，但我找到的答案并没有帮助。 我的媒体查询在桌面上运行得很好，但不是在 3 种不同的安卓设备上。没有任何变化，就好像 MQ 不存在一样。 我尝试使用全部，屏幕，仅屏幕。基本上所有选项，将我的元标记更改为您可以在下面看到的内容。

元：

 <meta content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1" name="viewport">
        <link rel="stylesheet" href="style_mini.css">

@media 手持设备，屏幕和（最大宽度：48em）某种风格

这是我的第一个网站，我真的不知道自己做错了什么。

好的，所以我花了几个小时进行测试，我的两个设备都“认为”它们有 960px 并使用媒体查询来获取这个宽度，而不是使用更小的 MQ。 此处建议的操作：http://webdesign.tutsplus.com/articles/quick-tip-dont-forget-the-viewport-meta-tag--webdesign-5972 没有帮助。

html  
* 
 box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 -webkit-text-size-adjust:none;
 
 body 
 font-family: 'Slabo 27px', serif;
 color: #3F4D59;
 background-color: #F2E9DE;
 width: 98%;
 margin: 0 auto;

.flex 
 display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
align-content: center;
align-items: center;

.top 
flex-direction: row;
order: 1;
background-color: #F2E9DE;
justify-content: left;
align-content: left;
align-items: left;

.top 
width: 100%;
position: fixed;
top: 0px;
z-index: 1000;
margin: auto;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=92);
-moz-opacity: 0.92;
-khtml-opacity: 0.92;
opacity: 0.92;

.anchor 
display: block;
height: 200px;
/*same height as header*/

margin-top: -200px;
/*same height as header*/

visibility: hidden;

.content 
padding-top: 200px;

.header 
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
align-self: auto;
/*    min-width: 0;*/

min-height: auto;
width: 35%;
text-align: center;
font-size: 3em;
padding: 2%;
 
.nav 
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
align-self: auto;
/*    min-width: 0;*/

min-height: auto;
width: 50%;
font-size: 2.5em;
text-align: right;

.nav a 
padding: 3%;

a:link,
a:visited 
color: #3F4D59;
text-decoration: none;
font-weight: bolder;

a:hover 
color: #9CA1A6;
text-decoration: none;

.stamp 
width: 15%;

.stamp 
background: url(images/kowalew_ALL.jpg);
display: block;
height: 200px;
width: 200px;
background-repeat: no-repeat;
/*    text-indent: -9999px;*/

.stamp:hover 
background-position: 0 -200px;

.offer 
order: 4;
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
align-self: auto;
min-width: 0;
min-height: auto;
padding-top: 3%;
padding-bottom: 4%;
padding-left: 2%;
background-image: url(images/pea3.jpg);
background-repeat: no-repeat;
background-size: cover;

h1 
font-size: 2em;
color: #3F4D59;
 
li 
font-size: 1.4em;
font-weight: 600;
text-align: left;
color: #F2E9DE;

.mini-contact 
order: 5;
background-color: #9ca1a6;
flex-direction: row;

.mini-contact p 
padding: 0 5%;
font-size: 1.2em;

.nolist 
list-style-type: none;
 
.sectionheader 
text-align: center;
font-size: 2.5em;
font-weight: 800;
flex-direction: column;
background-color: #F2E9DE;

.subsectionheader 
text-align: center;
font-size: 1.8em;
background-color: #F2E9DE;

.gallery 
flex-direction: row;
background-color: #F2E9DE;

.gallery img 
 width: 20%;
 margin: 0.1%;
 border: solid 4px #3F4D59;
 
.videocontainer iframe 
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 border: solid 4px #3F4D59;
 
.gallery img:hover 
 position: relative;
 overflow-x: hidden;
 border-radius: 10px;
 margin: auto 0;
 box-shadow: 7px 7px 10px #9ca1a6;
 transition: 0.5s ease-in-out;
 z-index: 2000;
 
.right:hover 
transform: scale(2) translateX(-25%);

.left:hover 
transform: scale(2) translateX(25%);

.middle:hover 
transform: scale(2);

.videocontainer a img 
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: solid 4px #3F4D59;

.video 
flex-direction: row;

.videocontainer 
position: relative;
padding-bottom: 10%;
padding-top: 135px;
margin-right: 2%;
margin-left: 2%;
height: 0;
overflow: hidden;
flex-direction: column;
width: 33%;
order: 1

.caption 
flex-direction: row;
width: 100%;
padding: 0;

.caption p 
width: 33%;
padding: 0;

.backgroundcon 
background-color: #9ca1a6;
padding-bottom: 4%;

.con 
background-color: #9ca1a6;

.contact p 
font-size: 1.4em;
font-weight: 700;
 
.map 
border: solid 3px #3F4D59;
 
footer 
text-align: center;
padding-top: 3%;
padding-bottom: 2%;

/*MEDIA QUARIES*/

@media handheld, screen and (max-width: 85.375em) 
.hide 
    display: none;


@media handheld, screen and (max-width: 64em) 
.header 
    font-size: 2em;
 
.nav 
    font-size: 1.8em;
 
.subsectionheader 
    font-size: 1.3em;
 
.sectionheader 
    font-size: 2em;
    font-weight: 300;
 
 
 @media handheld, screen and (max-width: 48em) 
 .shide 
    display: none;
 
 .gallery img 
    width: 25%;
 
 .contact p 
    font-size: 1.1em;
    font-weight: 300;
 
.sectionheader 
    font-size: 1.8em;

.nav 
    width: 60%;

.header 
    width: 40%;

.content 
    padding-top: 130px;


@media handheld, screen and (max-width: 40em) 
.xshide 
    display: none;

.gallery img 
    width: 33%;

.top 
    flex-direction: column;

.header 
    flex-direction: row;
    width: 100%;
    text-align: center;

.nav 
    flex-direction: row;
    width: 100%;
    text-align: center;

.content 
    padding-top: 130px;


@media handheld, screen and (max-width: 30em) 
.xxshide 
    display: none;

.gallery img 
    width: 50%;

.offer 
    background-image: none;
    margin-top: 2px;

a:hover 
    color: #498099;
    text-decoration: none;

li 
    color: #3F4D59;

.top 
    background-color: #9ca1a6;
    box-shadow: 3px 3px 3px #a7a4a4;
    border: solid 1px #a7a4a4;
    border-radius: 5px;

.mini-contact 
    box-shadow: 3px 3px 3px #a7a4a4;
    border: solid 1px #a7a4a4;
    border-radius: 5px;

.nav a 
    padding-bottom: 3%;

.backgroundcon 
    box-shadow: 3px 3px 3px #a7a4a4;
    border: solid 1px #a7a4a4;
    border-radius: 5px;

.caption p 
    width: 50%;

.videocontainer 
    width: 50%;

.content 
    padding-top: 80px;

 
@media handheld, screen and (max-width: 20em) 
.nav 
    flex-direction: column;
    width: auto;

.top 
    flex-direction: column;

.xxxshide 
    display: none;

li 
    font-size: 1.1em;

h1 
    font-size: 1.5em;

footer 
    font-size: .8em;

【问题讨论】：

一旦你检查了这个

检查过，没有任何改变。

你可以在 jsfiddle 中发送你的演示吗？

jsfiddle.net/yymon64j

使用这个@media (max-width: 768px)

【参考方案1】：

尝试替换最大尺寸的单位：使用px而不是em。

这是我一直用于媒体查询的代码示例，它始终适用于移动设备：

@media screen and (max-width : 1024px) 
    /* Change 1024 by what you need. */

---

这是W3schools 对em 单位的描述：

相对于元素的font-size（2em表示当前字体大小的2倍）

根据文档的字体大小定义媒体查询有点奇怪！

【讨论】：

我一开始用的是px。 MQ 不能在手机上工作，所以我把它改成了 em，以防万一（在某个地方找到，它工作）。

你的MQ可以用screen和px，不知道handheld还在用吗……

很遗憾，我一开始用的是screen，没用。然后我将其更改为其他选项，例如手持设备。

你用什么设备测试？？

华硕 7" 平板电脑和 5" 手机，都是安卓设备。

【参考方案2】：

您的媒体查询运行，它们只是不符合您的预期。我使用不同的屏幕尺寸得到了不同的结果，主要是 30em 左右。要调试它以了解发生了什么，您可以将color: blue 或color:red 等添加到标题或正文标签，然后显示更改。演示 jsfiddle 使用 HTML 和桌面 css 编辑媒体查询（到 px，内容替换为颜色）。

将handheld 与逗号一起使用意味着每个媒体查询都将针对任何手持设备运行，这可能会导致令人困惑的结果，因为屏幕尺寸将被忽略，如explained here。我没有看到handheld 在其他地方的媒体查询中使用过，并且看不到使用它的理由，除非您正在处理需要与相同大小的桌面不同的 css 的非常大的手持设备。

从您的 CSS 看来，您可能没有意识到带有 and (max-width: 48em) 和 and (max-width:40em) 的媒体查询将都针对 40em 或更小的屏幕尺寸运行 - 有些行在多个媒体查询中重复。如果您希望 (max-width:48em) 也不要针对较小的尺寸运行，那么您可以放置​​类似的内容，尽管我建议转换为 px 因为否则 40.0001em （例如）也不会触发查询：

 @media handheld, screen and (max-width: 48em) and (min-width:40.1em) 
 /* code for 40.1 to 48em */
 
@media handheld, screen and (max-width: 40em) 
 /* code for 40em and under */
 

另一种选择是从以前的媒体查询中反转有问题的任何内容，例如使用display: block 来显示之前隐藏的内容。媒体查询按照给定的顺序运行。

您的代码不是 MCVE 应该是 *** 的代码 - 大量编辑您的代码，无论您在此处发布还是自行调试，它都会帮助您出错强文本。