只有當設備水平時才適用css規則

我需要將一些css應用於移動設備（所有手機，android iPhone等），但只有當設備水平時才適用。當設備是垂直的時候，什麼都不會出現（頁面是空白的），並且一個不同的css將加載桌面。只有當設備水平時才適用css規則

我已經得到了桌面CSS大多數工作，但不能爲我的生活弄清楚該怎麼做瓦特/其餘。這也是一個巨大的混亂atm。我不知道接下來要做什麼。

任何幫助將非常感謝！

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/> 
<title>Untitled</title> 
<!--Adobe Edge Runtime--> 
<script type="text/javascript" charset="utf-8" src="romneyMorph_edgePreload.js">   </script> 
<style> 
    .edgeLoad-EDGE-455562748 { visibility:hidden; } 

.MobileMorph{ 
outline:1px solid red; 
} 

@media only screen and (max-device-width : 1223px) and (orientation : landscape){ 
.DesktopMorph { 
display: none; 
} 
} 

@media only screen and (max-device-width : 1223px) and (orientation : portrait){ 
.MobileMorph, .DesktopMorph { 
display:none; 
} 
} 

@media only screen and (min-width : 1224px){ 
.MobileMorph { 
display: none; 
} 
} 

@media only screen and (min-width : 1224px){ 
.MobileMorph { 
display: none; 
} 
} 
</style> 
<!--Adobe Edge Runtime End--> 



</head> 
<body style="margin:0;padding:0;"> 

<div id="everything"> 
<!--MOBILE--> 
<div class="DesktopMorph" align="center"> 
<iframe src="google.com" width="1024" height="344" frameBorder="0" style="outline: none; border: 0px;"></iframe> 
</div> 

<!--DESKTOP--> 
<div class="MobileMorph" align="center"> 
<iframe src="index.html" width="690" height="322" frameBorder="0" style="outline: none;   border: 0px;"></iframe> 
</div> 
</div> 

</body> 
</html>

來源

2014-03-26 Potts

http://www.w3.org/TR/css3-mediaqueries/#orientation – vsync

媒體查詢可以這樣做：

@media only screen and (orientation: landscape) { 
    /* css rules */ 
}

使用「肖像」用於垂直。

來源

2014-03-26 20:46:58

這就是我正在做的，如果你看看代碼。由於某種原因它仍然無法正常工作。 – Potts

也許放在前面的'和（max-device-width：1223px）'？ – Anthony

，解決了我在使用桌面版本時也顯示移動設備的問題，但是我的移動版本仍然在垂直顯示桌面時顯示，而不顯示任何內容。 – Potts

只有當設備水平時才適用css規則

回答

相關問題