<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Strait"> <div class="container" style="font-family: 'Strait', sans-serif;"> <div class="row"> <h2>dikey yatay tespit edici</h2> <div class="well" id="ekran"></div> </div> </div>

#ekran{ font-size:40px; font-weight:bold; text-align:center; margin-top:100px; } /* Dikey */ @media (orientation:portrait){ body{ background:#ffe5e5; } #ekran{ color:red; } } /* Yatay */ @media (orientation:landscape){ body{ background:#e5f0ff; } #ekran{ color:blue; } }

function ekranKontrol(){ if(window.matchMedia("(orientation: portrait)").matches){ $("#ekran").html("DİKEY MOD"); }else{ $("#ekran").html("YATAY MOD"); } } ekranKontrol(); $(window).on("resize orientationchange", function(){ ekranKontrol(); });