<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="jumbotron"> <h3>Ekran Genişliği</h3> <p>Tarayıcı penceresini yeniden boyutlandırın.</p> </div> <div id="result"></div> </div>

body { background-color: #f0f2f5; padding-top: 50px; } .container { max-width: 600px; background-color: #ffffff; border-radius: 8px; padding: 30px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); text-align: center; } .jumbotron { background-color: #007bff; color: #ffffff; border-radius: 8px; padding: 20px; } #result { font-size: 3em; font-weight: bold; color: #333; margin-top: 20px; }

$(document).ready(function () { // Ekran genişliğine göre Bootstrap kırılma noktasını döndüren fonksiyon function getBreakpoint(width) { if (width < 768) { return "XS"; } else if (width >= 768 && width < 992) { return "SM"; } else if (width >= 992 && width < 1200) { return "MD"; } else { return "LG"; } } // Ekran bilgilerini güncelleyen fonksiyon function updateScreenInfo() { var width = $(window).width(); var newBreakpoint = getBreakpoint(width); // Kırılma noktasını ekrana yazdır $("#result").html(newBreakpoint); } // Sayfa yüklendiğinde ve pencere boyutu değiştiğinde fonksiyonu çalıştır $(window).resize(updateScreenInfo); updateScreenInfo(); });