Question

我需要将一些css应用到移动设备（所有手机，Android iPhone等），但仅限于设备是水平的。当设备处于垂直状态时，不会显示任何内容（页面为空白），并且将为桌面加载不同的css。

我的桌面CSS大部分都在工作，但是对于我的生活来说，不知道该怎么办。它也是一个巨大的乱七八糟的混乱。我不知道下一步该尝试什么。

非常感谢任何帮助！

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

Answer 1

媒体查询可以做到这一点：

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

垂直使用“portrait”。

仅在设备为水平时应用css规则

1 个答案: