gpt4 book ai didi

html - 媒体查询不适用于移动设备、元数据集

转载 作者:太空宇宙 更新时间:2023-11-04 04:20:12 24 4
gpt4 key购买 nike

我有媒体查询未在移动设备上使用的问题。这在浏览器上可以正常工作,但在移动设备上却不行(实际上 Lumia 800 和 iPhone 手机之间的渲染似乎不同)。我已经浏览了这里的大部分帖子,在大多数情况下,人们遗漏了 meta 标记,但我已经将其设置在文档的头部;

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

这是我的移动 CSS 文件:

/* ===== == = === 20em (320px) === = == ===== */

@media screen and (min-width : 20em) {
.slidercontainer {
display:none;
}
}
@media only screen and (min-width : 30em) {
}

/* ===== == = === 37.5em (600px) === = == ===== */

@media only screen and (min-width: 37.5em) {
}

/* ===== == = === 48em (768px) === = == ===== */

@media only screen and (min-width : 48em) {
.slidercontainer {
display:inherit;
}
}

/* ===== == = === 56.25em (900px) === = == ===== */

@media only screen and (min-width : 56.25em) {
}

/* ===== == = === 68.75em (1100px) === = == ===== */

@media only screen and (min-width : 68.75em) {
.container {
width:1200px;
}

}


/* ===== == = === 81.25em (1300px) === = == ===== */

@media only screen and (min-width : 81.25em) {

}

在头部区域,我还包含了 2 个样式表,一个是带有常规 CSS 的默认样式表,另一个是带有...嗯,移动样式的默认样式表:)

<link href="css/default.css" rel="stylesheet" type="text/css" />
<link href="css/mobile.css" rel="stylesheet" type="text/css" media="all"/>

最佳答案

我好像发现了问题,以前只有

<html>
<head>

在头文件中,但是一旦我将其更改为

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

它也开始使用移动样式表了!一个菜鸟错误:)

谢谢大家的建议!

关于html - 媒体查询不适用于移动设备、元数据集,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19197635/

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