我需要将一些 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>
媒体查询可以做到这一点：
@media only screen and (orientation: landscape) {
/* css rules */
}
垂直使用“纵向”。
| 归档时间： |
|
| 查看次数： |
3150 次 |
| 最近记录： |