媒體查詢不適用於移動設備，元集

我在移動設備上未使用媒體查詢時遇到問題。這可以在瀏覽器上正常工作，但不能在移動設備上正常運行（它實際上在Lumia 800和iPhone手機之間似乎呈現出不同的效果）。我已經通過這個問題的大部分帖子在這裏，並在大多數情況下人們遺漏了元標記，但我已經將其設置在文檔的頭部;媒體查詢不適用於移動設備，元集

<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"/>

來源

2013-10-05 Kjarri

如果我們能看到該網站，它可能會有所幫助。你有鏈接，我們可以在一系列設備上測試它嗎？ –

你好！感謝您的回覆！是的，它的http://dev.krummalingur.com/jspiping – Kjarri

請參閱下面的答案。 –

我發現似乎這個問題，我以前只有

<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">

它開始使用移動樣式，以及！菜鳥的錯誤:)

謝謝大家的建議！

來源

2013-10-06 10:33:39 Kjarri

你可以改變它來檢測設備：

<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

來源

2013-10-05 12:23:43

嗨！謝謝你的建議，但不幸的是它似乎並沒有改變:( – Kjarri

-1

嘗試使用這種方法，如果你想或引導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 */ 
}

來源

2013-10-05 12:33:55 user2814461

嗨！我試過了，但它仍然是同樣的事情悲傷:(這就像移動設備根本不使用樣式表。以供將來參考！謝謝！ – Kjarri

我不完全確定這是一個CSS媒體查詢問題。

即使在桌面上，您正在選取c.1240px以下的水平滾動條。

我認爲這與<div class="sidebox">有關。如果您使用開發人員工具（Chrome）或Firebug檢查網站，您可以清楚地看到有些元素正在從容器中脫落。

我懷疑這是由於定位問題或混合％寬度與定義的px寬度。

來源

2013-10-05 20:44:35

即使它正在打破容器（我感謝你指出的方式:)），.slidercontainer應該完全消失在移動版本。你認爲定位可以是影響呢？ – Kjarri

這很有可能。絕對定位有它的用途，但它並不真正推薦用於重複佈局。 –

媒體查詢不適用於移動設備，元集

回答

相關問題