Kích thước màn hình của máy bạn là bao nhiêu?

Có bao giờ bạn thắc mắc độ phân giải màn hình bạn đang dùng là bao nhiêu không? Nếu không thì kệ mọe bạn, nhưng nếu bạn tìm hiểu trên google thì toàn mấy cái trang đưa thông tin dài dòng lê thê.

Một số thì hướng dẫn lụm thước đo thủ công 😵, rồi cái này đến cái nọ mà không vào trọng tâm bài viết, số khác thì chỉ xem được trên pc chứ éo có cách xem cho điện thoại.

Và trong bài viết này sẽ trực tiếp cho bạn xem luôn bên dưới, dù là pc hay điện thoại cũng vẫn hiển thị thông số đúng với màn hình bạn đang dùng.

Có code kèm theo cho bạn nào thích lụm về trang trí blog /web nhé!

📱 Độ phân giải logic: 1280 x 720

🌐 Kích thước hiển thị: 1280 x 720

🔍 Tỷ lệ pixel: 1.00

🖥️ Độ phân giải thực: 1280 x 720

Như demo bạn đã thấy bên trên, và dưới này là code của nó.

<h2>Thông Tin Màn Hình</h2>
<div class="info-box">
    <p><span><b>📱 Độ phân giải logic:</b></span> <b id="screenSize"></b></p>
    <p><span><b>🌐 Kích thước hiển thị:</b></span> <b id="viewportSize"></b></p>
    <p><span><b>🔍 Tỷ lệ pixel:</b></span> <b id="deviceRatio"></b></p>
    <p><span><b>🖥️ Độ phân giải thực:</b></span> <b id="realResolution"></b></p>
</div>

<script>
    function updateScreenInfo() {
        let dpr = window.devicePixelRatio;
        let realWidth = screen.width * dpr;
        let realHeight = screen.height * dpr;

        document.getElementById("screenSize").innerText = `${screen.width} x ${screen.height}`;
        document.getElementById("viewportSize").innerText = `${window.innerWidth} x ${window.innerHeight}`;
        document.getElementById("deviceRatio").innerText = dpr.toFixed(2);
        document.getElementById("realResolution").innerText = `${realWidth} x ${realHeight}`;
    }

    updateScreenInfo();
    window.addEventListener("resize", updateScreenInfo);
</script>

<style>
    .info-box {
        max-width: 360px;
        margin: auto;
        padding: 15px;
        border-radius: 12px;
        background: #f9f9f9;
        font-size: 16px;
        line-height: 1.6;
        text-align: left;
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .info-box p {
        display: flex;
        justify-content: space-between;
        padding: 6px 0;
        border-bottom: 1px solid #e0e0e0;
        margin: 0;
    }

    .info-box p:last-child {
        border-bottom: none;
    }

    .info-box span {
        color: #666;
    }

    .info-box b {
        font-weight: 600;
    }
</style>

Xong rồi, nếu có vấn đề hoặc khó hiểu chỗ nào thì hãy cmt bên dưới nhé! Mình sẽ giải đáp lâu nhất có thể... 🙃

Hashtag: Kích thước màn hình của máy bạn là bao nhiêu?

Blogger Chitose2D Code hay tiện ích

• Facebook
• Pinterest

Liên quan gần đây

Code hay tiện ích

• Kế tiếp ⇨ Tuyệt kỹ thất truyền
• ⇦ Trước đó Hiệu ứng âm thanh - Anime (Wow)