媒體查詢不適用於移動元集
[英]Media queries not working on mobile, meta set
問題描述
我在移動設備上未使用媒體查詢時遇到問題。 這可以在瀏覽器上正常工作，但不能在移動設備上工作（實際上，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"/>
4 個解決方案
解決方案1
3 已采納 2013-10-06 10:33:39
我發現了似乎存在的問題，我以前只有
<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">
它也開始使用移動樣式表！ 一個菜鳥的錯誤:)
謝謝大家的建議！
解決方案2
0 2013-10-05 12:23:43
您可以更改它以檢測設備：
<link href="css/mobile.css" rel="stylesheet" type="text/css" media="handheld"/>
或者，您可以更改它以檢測屏幕尺寸：
<link href="css/mobile.css" rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)"/>
您可以閱讀有關媒體類型的更多信息： http : //www.w3.org/TR/CSS2/media.html
解決方案3
0 2013-10-05 20:44:35
我不完全確定這是CSS媒體查詢問題。
即使在台式機上，您也會在c.1240px以下拾取水平滾動條。
我認為這與<div class="sidebox"> 。 如果您使用開發人員工具（在Chrome中）或Firebug檢查站點，則可以清楚地看到某些元素正在從容器中泄漏出來。
我懷疑這是由於定位問題或將％-widths與定義的px-widths混合造成的。
解決方案4
-1 2013-10-05 12:33:55
如果您願意，請嘗試使用此方法；如果Mobile First Frame工作正常，請嘗試使用Bootstrap 3
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
@media查詢無法在移動設備上運行
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.