CODEWITHSUNDEEP
htmlcssmobile
Potts
Potts

Reputation: 15

apply css rule only when device is horizontal

I need to apply some css to a mobile device (all cell phones, android iPhone etc.), but only when the device is horizontal. When the device is vertical, nothing will appear (the page is blank), and a different css will load for desktop.

I've got the desktop CSS mostly working, but can't for the life of me figure out what to do w/ the rest. It's also a huge jumbled mess atm. I've no idea what to try next.

any help would be very much appreciated!

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

Upvotes: 1

Views: 5520

Answers (1)

rich remer
rich remer

Reputation: 3577

Media queries can do that:

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

Use "portrait" for vertical.

Upvotes: 6

Related Questions