{"id":4670,"date":"2026-05-06T04:25:11","date_gmt":"2026-05-06T04:25:11","guid":{"rendered":"https:\/\/monitorgarage-localwp-sql-2026-09-06.local\/?page_id=4670"},"modified":"2026-05-09T00:44:24","modified_gmt":"2026-05-09T00:44:24","slug":"comparador-visual-de-tamanos-de-monitores","status":"publish","type":"page","link":"https:\/\/monitorgarage.com\/en\/comparador-visual-de-tamanos-de-monitores\/","title":{"rendered":"Visual Monitor Size Comparison"},"content":{"rendered":"        <section id=\"mg-size-v17-1\" class=\"mg-size-v5\" data-mg-size-sim-v17>\r\n            <style>html body #content.site-content #mg-size-v17-1{\r\n--mg-blue:#518ca4;--mg-gold:var(--mg-ui-link,#d9ab00);--mg-text:var(--mg-ui-ink,#202020);--mg-muted:var(--mg-ui-muted,#666);--mg-card:var(--mg-ui-surface,#f2f1ec);--mg-soft:var(--mg-ui-soft,#e8e7e2);--mg-line:var(--mg-ui-line,#d2d0c8);color:var(--mg-text);font-family:var(--mg-ui-font,inherit);line-height:1.5\r\n}\r\nhtml body #content.site-content #mg-size-v17-1 *{box-sizing:border-box}\r\nhtml body #content.site-content #mg-size-v17-1 :is(h1,h2,h3,p){margin:0}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-shell{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:24px;align-items:start}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-header{grid-column:1\/-1;margin-bottom:12px;padding:0 0 8px!important}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-kicker{color:var(--mg-muted);font-size:14px;margin-bottom:12px;padding:0 0 8px!important}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-title{font-size:clamp(30px,3.4vw,46px);line-height:1.12;letter-spacing:-.035em;font-weight:750;max-width:34ch}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-subtitle{font-size:18px;color:var(--mg-muted);max-width:75ch;margin-top:18px}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-stage-card{grid-column:1;grid-row:2;min-width:0;border:1px solid var(--mg-line);border-radius:6px;padding:0;overflow:hidden;background:var(--mg-card)}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-stage-head{padding:20px 22px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--mg-line)}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-stage-title{font-size:18px;font-weight:650}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-stage-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}\r\nhtml body #content.site-content #mg-size-v17-1 button{font:inherit;font-size:14px;font-weight:600;line-height:1.2;padding:10px 12px;min-height:40px;border:1px solid var(--mg-line);border-radius:4px;color:var(--mg-text);background:transparent;cursor:pointer;box-shadow:none}\r\nhtml body #content.site-content #mg-size-v17-1 button:hover{background:var(--mg-soft)}\r\nhtml body #content.site-content #mg-size-v17-1 :is(button,select,input,summary):focus-visible{outline:2px solid var(--mg-gold);outline-offset:3px}\r\nhtml body #content.site-content #mg-size-v17-1 button.is-active{color:var(--mg-gold)}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-mode-toggle{display:flex;gap:4px;padding:4px;background:var(--mg-soft);border-radius:7px}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-stage{height:340px;position:relative;overflow:hidden}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-screen-layer{position:absolute;inset:0}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-monitor{--screen-color:var(--mg-blue);position:absolute;left:var(--mg-x);top:var(--mg-y);width:var(--mg-w);height:var(--mg-h)}\r\nhtml body #content.site-content #mg-size-v17-1 [data-monitor=b]{--screen-color:var(--mg-gold)}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-panel{position:absolute;inset:0;background:color-mix(in srgb,var(--screen-color) 12%,var(--mg-card));border:2px solid var(--screen-color);border-radius:3px;box-shadow:none!important}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-monitor-label{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:var(--mg-text);pointer-events:none}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-monitor-label strong{display:block;font-size:clamp(18px,2.3vw,30px);line-height:1.2;font-weight:700}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-monitor-label span{display:block;font-size:12px;margin-top:5px}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-stand{position:absolute;top:calc(100% + 3px);left:50%;transform:translateX(-50%);width:calc(var(--mg-stand-base,70px) * .2);height:calc(var(--mg-stand-base,70px) * .4);background:#444848}\nhtml body #content.site-content #mg-size-v17-1 .mg-size-stand:after{content:'';position:absolute;top:calc(100% - 1px);left:50%;transform:translateX(-50%);width:var(--mg-stand-base,70px);height:max(2px,calc(var(--mg-stand-base,70px) * .07));background:#444848;border-radius:2px}\nhtml body #content.site-content #mg-size-v17-1.mg-size-no-stand .mg-size-stand{display:none}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-overlay [data-monitor=a]{z-index:2}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-overlay .mg-size-panel{background:color-mix(in srgb,var(--screen-color) 8%,transparent)}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-overlay [data-monitor=a] .mg-size-monitor-label{place-items:start;padding:10px}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-overlay [data-monitor=b] .mg-size-monitor-label{place-items:end;padding:10px}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-stage-foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:12px 20px;border-top:1px solid var(--mg-line);font-size:13px;color:var(--mg-muted)}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-legend{display:flex;gap:16px}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-legend-pill{display:flex;align-items:center;gap:7px}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-dot{width:8px;height:8px;background:var(--dot);border-radius:50%}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-swap-hub{display:flex;gap:6px;margin-left:auto}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-icon-action{width:40px;height:40px;padding:9px}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-icon-action svg{width:20px;height:20px;stroke-width:1.8}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-controls{grid-column:2;grid-row:2\/span 2;display:grid;gap:16px;min-width:0}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-card{padding:20px;border:1px solid var(--mg-line);border-top:2px solid var(--card-color);border-radius:6px;background:var(--mg-card)}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-card-title{display:flex;align-items:center;gap:9px;font-size:18px;font-weight:650}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-card-dot{width:9px;height:9px;background:var(--card-color);border-radius:50%}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-card-mini{font-size:12px;color:var(--mg-muted)}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-form-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin-top:12px}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-form-row.is-preset{grid-template-columns:1fr}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-field-label{display:block;font-size:13px;color:var(--mg-muted);margin-bottom:6px}\r\nhtml body #content.site-content #mg-size-v17-1 :is(.mg-size-input,.mg-size-select){width:100%;height:42px;min-width:0;padding:8px 10px;border:1px solid var(--mg-line);border-radius:4px;background:var(--mg-card);color:var(--mg-text);font:inherit;font-size:15px}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-number-wrap{display:grid;grid-template-columns:30px minmax(0,1fr) 30px;align-items:center;gap:2px}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-number-wrap button{padding:4px;min-height:40px}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-number-wrap input{text-align:center;padding:5px;appearance:textfield;-moz-appearance:textfield}\r\nhtml body #content.site-content #mg-size-v17-1 input::-webkit-inner-spin-button{appearance:none}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-ratio-status{display:none;font-size:13px;color:var(--mg-muted);margin-top:14px;padding-top:12px;border-top:1px solid var(--mg-line)}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-ratio-status.is-visible{display:grid;gap:8px}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-ratio-fix{justify-self:start}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-results{grid-column:1;grid-row:3;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--mg-line)}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-result{padding:16px 12px 10px 0;min-width:0}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-result.is-verdict{grid-column:1\/-1;display:grid;grid-template-columns:1fr;gap:6px;border-bottom:1px solid var(--mg-line);padding-bottom:16px}\r\nhtml body #content.site-content #mg-size-v17-1 .is-verdict .mg-size-result-label{font-size:13px;margin:0}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-result-label{font-size:13px;color:var(--mg-muted);margin-bottom:6px}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-result-value{font-size:22px;font-weight:700;line-height:1.35}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-result-value.is-metric{font-size:18px;display:flex;align-items:baseline;gap:4px;flex-wrap:wrap}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-unit{font-size:12px;font-weight:400;color:var(--mg-muted)}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-arrow{font-size:14px;margin:0 3px;color:var(--mg-muted)}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-result-copy{font-size:13px;color:var(--mg-muted);margin-top:6px}\r\nhtml body #content.site-content #mg-size-v17-1 .is-verdict .mg-size-result-copy{font-size:14px;margin-top:0}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-m1{color:var(--mg-blue)}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-m2{color:var(--mg-gold)}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-note{grid-column:1\/-1;border-top:1px solid var(--mg-line);padding-top:20px;font-size:13px;color:var(--mg-muted);max-width:100ch}\r\n@media(max-width:1100px){\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-shell{grid-template-columns:minmax(0,1fr) 320px;gap:20px}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-results{grid-template-columns:repeat(3,minmax(0,1fr))}\r\n}\r\n@media(max-width:850px){\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-shell{display:flex;flex-direction:column;gap:24px}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-shell>*{width:100%}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-controls{grid-template-columns:repeat(2,minmax(0,1fr))}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-stage{height:310px}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-results{grid-template-columns:repeat(3,minmax(0,1fr))}\r\n}\r\n@media(max-width:550px){\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-controls{grid-template-columns:1fr}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-results{grid-template-columns:repeat(3,minmax(0,1fr))}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-stage{height:210px;min-height:210px}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-stage-head{padding:16px}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-stage-tools{gap:5px}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-stage-tools button{font-size:12px;padding:9px}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-monitor-label span{font-size:10px}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-result.is-verdict{grid-template-columns:1fr}\r\n}\r\n\r\n\/* Integrated controls, selected states and keyboard-accessible menus. *\/\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-mode-btn{border:0;min-height:38px;padding:10px 14px;border-radius:4px;color:var(--mg-muted)}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-mode-btn.is-active{background:var(--mg-card);color:var(--mg-text);box-shadow:0 1px 4px #0002}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-view-btn{border:0;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-check{display:grid;place-items:center;width:16px;height:16px;border:1px solid var(--mg-muted);border-radius:3px}\r\nhtml body #content.site-content #mg-size-v17-1 .is-active .mg-size-check{background:var(--mg-gold);border-color:var(--mg-gold);color:#202020}\r\nhtml body #content.site-content #mg-size-v17-1 .is-active .mg-size-check:after{content:'\u2713';font-size:12px}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-select-trigger{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:50px;text-align:left;padding:12px 14px;background:var(--mg-soft);border:1px solid var(--mg-line);border-radius:6px;font-size:15px;font-weight:650}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-select-trigger:hover,.mg-size-select-trigger[aria-expanded=true]{border-color:var(--mg-gold);background:color-mix(in srgb,var(--mg-gold) 5%,var(--mg-soft))}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-select-value{min-width:0;line-height:1.4}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-select-chevron{flex-shrink:0;width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin:0 3px 4px 0;color:var(--mg-muted)}\r\nhtml body #content.site-content #mg-size-v17-1 [aria-expanded=true]>.mg-size-select-chevron{transform:rotate(225deg);margin-bottom:0}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-select-menu{position:fixed;z-index:10010;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--mg-muted) var(--mg-card);padding:6px;background:var(--mg-card);border:1px solid var(--mg-line);border-radius:8px;box-shadow:0 12px 32px #0004}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-select-menu[hidden],.mg-size-select[hidden]{display:none!important}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-select-option{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;min-height:44px;border-radius:4px;cursor:pointer;line-height:1.35;color:var(--mg-text)}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-select-option strong{display:block;font-size:14px;font-weight:600}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-select-option small{display:block;font-size:12px;color:var(--mg-muted);margin-top:3px}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-select-option:hover,.mg-size-select-option.is-highlighted{background:var(--mg-soft)}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-select-option[aria-selected=true]{background:color-mix(in srgb,var(--mg-gold) 10%,var(--mg-card));color:var(--mg-text)}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-select-check{visibility:hidden;color:var(--mg-gold);font-size:17px}\r\nhtml body #content.site-content #mg-size-v17-1 [aria-selected=true]>.mg-size-select-check{visibility:visible}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-custom{margin-top:16px;border-top:1px solid var(--mg-line);padding-top:12px}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-custom summary{display:flex;align-items:center;justify-content:space-between;list-style:none;cursor:pointer;font-size:13px;font-weight:600;color:var(--mg-muted);padding:4px 0;min-height:32px}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-custom summary::-webkit-details-marker{display:none}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-custom summary:after{content:'+';font-size:19px;font-weight:400}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-custom[open] summary:after{content:'\u2212'}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-custom summary:hover{color:var(--mg-text)}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-input{background:var(--mg-soft);font-size:16px}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-number-wrap{border:1px solid var(--mg-line);border-radius:4px;background:var(--mg-soft);gap:0}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-number-wrap :is(button,input){border:0;background:transparent;min-width:0}\r\nhtml body #content.site-content #mg-size-v17-1 .is-verdict .mg-size-result-value{font-size:clamp(23px,2.2vw,30px);letter-spacing:-.025em}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-controls{grid-row:2\/span 2}\r\n@media(max-width:850px){\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-header{order:0}\nhtml body #content.site-content #mg-size-v17-1 .mg-size-controls{order:1}\nhtml body #content.site-content #mg-size-v17-1 .mg-size-stage-card{order:2}\nhtml body #content.site-content #mg-size-v17-1 .mg-size-results{order:3}\nhtml body #content.site-content #mg-size-v17-1 .mg-size-note{order:4}\r\n}\r\n@media(max-width:550px){\nhtml body #content.site-content #mg-size-v17-1 .mg-size-controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}\nhtml body #content.site-content #mg-size-v17-1 .mg-size-controls:has(details[open]){grid-template-columns:1fr}\nhtml body #content.site-content #mg-size-v17-1 .mg-size-card{padding:12px}\nhtml body #content.site-content #mg-size-v17-1 .mg-size-card-title{font-size:16px;gap:6px}\nhtml body #content.site-content #mg-size-v17-1 .mg-size-card-mini{display:none}\nhtml body #content.site-content #mg-size-v17-1 .mg-size-field-label{font-size:12px}\nhtml body #content.site-content #mg-size-v17-1 .mg-size-select-trigger{font-size:14px;gap:10px;padding:10px;min-height:62px}\nhtml body #content.site-content #mg-size-v17-1 .mg-size-stage-head{align-items:flex-start}\nhtml body #content.site-content #mg-size-v17-1 .mg-size-stage-tools{width:100%;justify-content:space-between;gap:8px}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-results{grid-template-columns:1fr}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-result:not(.is-verdict){display:grid;grid-template-columns:70px 1fr;gap:4px 12px;padding:12px 0;border-bottom:1px solid var(--mg-line)}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-result:not(.is-verdict) .mg-size-result-label{grid-row:1\/span 2}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-result-copy{margin-top:0}\r\nhtml body #content.site-content #mg-size-v17-1 .mg-size-stage-tools .mg-size-view-btn{padding:8px 0}\r\n}\r\n<\/style>\r\n\r\n            <div class=\"mg-size-shell\">\r\n                <header class=\"mg-size-header\">\r\n                    <div>\r\n                        <div class=\"mg-size-kicker\">Monitor Garage tool<\/div>\r\n                        <h2 class=\"mg-size-title\">Monitor size comparison<\/h2>\r\n                        <p class=\"mg-size-subtitle\">See how much space you gain when changing monitors. Compare their dimensions, screen area and pixel density.<\/p>\r\n                    <\/div>\r\n                <\/header>\r\n\r\n                <div class=\"mg-size-stage-card\">\r\n                    <div class=\"mg-size-stage-head\">\r\n                        <h3 class=\"mg-size-stage-title\">Visual comparison<\/h3>\r\n                        <div class=\"mg-size-stage-tools\">\r\n                            <div class=\"mg-size-mode-toggle\" role=\"group\" aria-label=\"Comparison mode\">\r\n                                <button class=\"mg-size-mode-btn is-active\" type=\"button\" data-mode=\"side\" aria-pressed=\"true\">Side by side<\/button>\r\n                                <button class=\"mg-size-mode-btn\" type=\"button\" data-mode=\"overlay\" aria-pressed=\"false\">Overlay<\/button>\r\n                            <\/div>\r\n                            <button class=\"mg-size-view-btn is-active\" type=\"button\" data-toggle-stand aria-pressed=\"true\"><span class=\"mg-size-check\" aria-hidden=\"true\"><\/span>Show stand<\/button>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"mg-size-stage\" data-stage role=\"img\" aria-label=\"Proportional comparison of the two screens; detailed dimensions below\">\r\n                        <div class=\"mg-size-screen-layer\" data-layer>\r\n                            <div class=\"mg-size-monitor\" data-monitor=\"a\">\r\n                                <div class=\"mg-size-panel\"><\/div>\r\n                                <div class=\"mg-size-monitor-label\"><div><strong data-screen-inch-a>24\u201d<\/strong><span data-screen-res-a>1920\u00d71080<\/span><\/div><\/div>\r\n                                <div class=\"mg-size-stand\"><\/div>\r\n                            <\/div>\r\n                            <div class=\"mg-size-monitor\" data-monitor=\"b\">\r\n                                <div class=\"mg-size-panel\"><\/div>\r\n                                <div class=\"mg-size-monitor-label\"><div><strong data-screen-inch-b>27\u201d<\/strong><span data-screen-res-b>2560\u00d71440<\/span><\/div><\/div>\r\n                                <div class=\"mg-size-stand\"><\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"mg-size-stage-foot\">\r\n                        <div class=\"mg-size-legend\">\r\n                            <span class=\"mg-size-legend-pill\"><i class=\"mg-size-dot\" style=\"--dot: var(--mg-blue);\"><\/i>Monitor 1<\/span>\r\n                            <span class=\"mg-size-legend-pill\"><i class=\"mg-size-dot\" style=\"--dot: var(--mg-gold);\"><\/i>Monitor 2<\/span>\r\n                        <\/div>\r\n                    <div class=\"mg-size-swap-hub\" aria-label=\"Comparison controls\">\r\n                        <button class=\"mg-size-icon-action mg-size-swap-main\" type=\"button\" data-swap aria-label=\"Swap Monitor 1 and Monitor 2\" title=\"Swap\">\r\n                            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M7 7h11\"\/><path d=\"M14 3l4 4-4 4\"\/><path d=\"M17 17H6\"\/><path d=\"M10 13l-4 4 4 4\"\/><\/svg>\r\n                        <\/button>\r\n                        <button class=\"mg-size-icon-action mg-size-swap-reset\" type=\"button\" data-reset aria-label=\"Reset\" title=\"Reset\">\r\n                            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 12a9 9 0 1 0 3-6.7\"\/><path d=\"M3 4v6h6\"\/><\/svg>\r\n                        <\/button>\r\n                    <\/div>\r\n\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"mg-size-controls\">\r\n                    <div class=\"mg-size-card\" data-card=\"a\" style=\"--card-color: var(--mg-blue);\">\r\n                        <div class=\"mg-size-card-head\">\r\n                            <h3 class=\"mg-size-card-title\"><span class=\"mg-size-card-dot\"><\/span>Monitor 1<\/h3>\r\n                            <span class=\"mg-size-card-mini\" data-mini-a>24\u201d \u00b7 16:9<\/span>\r\n                        <\/div>\r\n\r\n                        <div class=\"mg-size-form-row is-preset\">\r\n                            <div>\r\n                                <label class=\"mg-size-field-label\" for=\"mg-size-v17-1-preset-a\">Size and resolution<\/label>\r\n                                <div class=\"mg-size-dd\" data-dd=\"preset-a\" data-label=\"Tama\u00f1o habitual del Monitor 1\"><\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n\r\n                        <details class=\"mg-size-custom\" data-custom=\"a\"><summary>Manual adjustment<\/summary>\r\n                        <div class=\"mg-size-form-row\">\n                            <div>\r\n                                <label class=\"mg-size-field-label\" for=\"mg-size-v17-1-inch-a\">Screen size<\/label>\r\n                                <div class=\"mg-size-number-wrap\">\r\n                                    <button class=\"mg-size-step\" type=\"button\" data-step=\"a\" data-delta=\"-1\" aria-label=\"Decrease Monitor 1 diagonal\">\u2212<\/button>\r\n                                    <input class=\"mg-size-input\" type=\"number\" min=\"10\" max=\"90\" step=\"0.1\" data-field=\"inch-a\" id=\"mg-size-v17-1-inch-a\" aria-label=\"Monitor 1 diagonal in inches\" value=\"24\">\r\n                                    <button class=\"mg-size-step\" type=\"button\" data-step=\"a\" data-delta=\"1\" aria-label=\"Increase Monitor 1 diagonal\">+<\/button>\r\n                                <\/div>\r\n                            <\/div>\r\n                            <div>\r\n                                <label class=\"mg-size-field-label\" for=\"mg-size-v17-1-aspect-a\">Format<\/label>\r\n                                <div class=\"mg-size-dd\" data-dd=\"aspect-a\" data-label=\"Formato del Monitor 1\"><\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n\r\n                        <div class=\"mg-size-form-row\">\r\n                            <div>\r\n                                <label class=\"mg-size-field-label\" for=\"mg-size-v17-1-resx-a\">Width in pixels<\/label>\r\n                                <input class=\"mg-size-input\" type=\"number\" min=\"640\" max=\"10000\" step=\"1\" data-field=\"resx-a\" id=\"mg-size-v17-1-resx-a\" aria-label=\"Monitor 1 width in pixels\" value=\"1920\">\r\n                            <\/div>\r\n                            <div>\r\n                                <label class=\"mg-size-field-label\" for=\"mg-size-v17-1-resy-a\">Height in pixels<\/label>\r\n                                <input class=\"mg-size-input\" type=\"number\" min=\"480\" max=\"5000\" step=\"1\" data-field=\"resy-a\" id=\"mg-size-v17-1-resy-a\" aria-label=\"Monitor 1 height in pixels\" value=\"1080\">\r\n                            <\/div>\r\n                        <\/div>\r\n\r\n                        <\/details>\n                        <div class=\"mg-size-ratio-status\" data-ratio-status=\"a\" aria-live=\"polite\">\n                            <span data-ratio-copy=\"a\"><\/span>\r\n                            <button class=\"mg-size-ratio-fix\" type=\"button\" data-fix-aspect=\"a\">Adjust format<\/button>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <div class=\"mg-size-card\" data-card=\"b\" style=\"--card-color: var(--mg-gold);\">\r\n                        <div class=\"mg-size-card-head\">\r\n                            <h3 class=\"mg-size-card-title\"><span class=\"mg-size-card-dot\"><\/span>Monitor 2<\/h3>\r\n                            <span class=\"mg-size-card-mini\" data-mini-b>27\u201d \u00b7 16:9<\/span>\r\n                        <\/div>\r\n\r\n                        <div class=\"mg-size-form-row is-preset\">\r\n                            <div>\r\n                                <label class=\"mg-size-field-label\" for=\"mg-size-v17-1-preset-b\">Size and resolution<\/label>\r\n                                <div class=\"mg-size-dd\" data-dd=\"preset-b\" data-label=\"Tama\u00f1o habitual del Monitor 2\"><\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n\r\n                        <details class=\"mg-size-custom\" data-custom=\"b\"><summary>Manual adjustment<\/summary>\r\n                        <div class=\"mg-size-form-row\">\n                            <div>\r\n                                <label class=\"mg-size-field-label\" for=\"mg-size-v17-1-inch-b\">Screen size<\/label>\r\n                                <div class=\"mg-size-number-wrap\">\r\n                                    <button class=\"mg-size-step\" type=\"button\" data-step=\"b\" data-delta=\"-1\" aria-label=\"Decrease Monitor 2 diagonal\">\u2212<\/button>\r\n                                    <input class=\"mg-size-input\" type=\"number\" min=\"10\" max=\"90\" step=\"0.1\" data-field=\"inch-b\" id=\"mg-size-v17-1-inch-b\" aria-label=\"Monitor 2 diagonal in inches\" value=\"27\">\r\n                                    <button class=\"mg-size-step\" type=\"button\" data-step=\"b\" data-delta=\"1\" aria-label=\"Increase Monitor 2 diagonal\">+<\/button>\r\n                                <\/div>\r\n                            <\/div>\r\n                            <div>\r\n                                <label class=\"mg-size-field-label\" for=\"mg-size-v17-1-aspect-b\">Format<\/label>\r\n                                <div class=\"mg-size-dd\" data-dd=\"aspect-b\" data-label=\"Formato del Monitor 2\"><\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n\r\n                        <div class=\"mg-size-form-row\">\r\n                            <div>\r\n                                <label class=\"mg-size-field-label\" for=\"mg-size-v17-1-resx-b\">Width in pixels<\/label>\r\n                                <input class=\"mg-size-input\" type=\"number\" min=\"640\" max=\"10000\" step=\"1\" data-field=\"resx-b\" id=\"mg-size-v17-1-resx-b\" aria-label=\"Monitor 2 width in pixels\" value=\"2560\">\r\n                            <\/div>\r\n                            <div>\r\n                                <label class=\"mg-size-field-label\" for=\"mg-size-v17-1-resy-b\">Height in pixels<\/label>\r\n                                <input class=\"mg-size-input\" type=\"number\" min=\"480\" max=\"5000\" step=\"1\" data-field=\"resy-b\" id=\"mg-size-v17-1-resy-b\" aria-label=\"Monitor 2 height in pixels\" value=\"1440\">\r\n                            <\/div>\r\n                        <\/div>\r\n\r\n                        <\/details>\n                        <div class=\"mg-size-ratio-status\" data-ratio-status=\"b\" aria-live=\"polite\">\n                            <span data-ratio-copy=\"b\"><\/span>\r\n                            <button class=\"mg-size-ratio-fix\" type=\"button\" data-fix-aspect=\"b\">Adjust format<\/button>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n\r\n                <div class=\"mg-size-results\">\r\n                    <div class=\"mg-size-result is-verdict\">\r\n                        <div class=\"mg-size-result-label\">From Monitor 1 to Monitor 2<\/div>\r\n                        <div class=\"mg-size-result-value\" data-verdict-title>27% more screen area<\/div>\r\n                        <div class=\"mg-size-result-copy\" data-verdict-copy>Visible panel dimensions.<\/div>\r\n                    <\/div>\r\n                    <div class=\"mg-size-result is-compare\">\r\n                        <div class=\"mg-size-result-label\">Width<\/div>\r\n                        <div class=\"mg-size-result-value is-metric\" data-width-compare>53,1 vs 59,8 cm<\/div>\r\n                        <div class=\"mg-size-result-copy\" data-width-copy>Helps you judge how much desk space it will take up.<\/div>\r\n                    <\/div>\r\n                    <div class=\"mg-size-result is-compare\">\r\n                        <div class=\"mg-size-result-label\">Height<\/div>\r\n                        <div class=\"mg-size-result-value is-metric\" data-height-compare>29,9 vs 33,6 cm<\/div>\r\n                        <div class=\"mg-size-result-copy\" data-height-copy>Helps you judge whether it will actually look bigger.<\/div>\r\n                    <\/div>\r\n                    <div class=\"mg-size-result is-compare\">\r\n                        <div class=\"mg-size-result-label\">Density<\/div>\r\n                        <div class=\"mg-size-result-value is-metric\" data-ppi-compare>92 vs 109 PPI<\/div>\r\n                        <div class=\"mg-size-result-copy\" data-ppi-copy>Higher PPI means finer images and text.<\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"mg-size-note\">\r\n                    <strong>Shown at the same scale.<\/strong> The visible panels are compared; they are not shown at life size on your device. The stand is illustrative and is excluded from the measurements. Ultrawide dimensions are approximate, based on the selected format.                <\/div>\r\n            <\/div>\r\n\r\n            <script>\r\n                (function(){\r\n                    const root = document.getElementById('mg-size-v17-1');\r\n                    if (!root || root.dataset.ready === '1') return;\r\n                    root.dataset.ready = '1';\r\n\r\n                    const presets = [\r\n                        { label: '24\u201d 1080p \u00b7 16:9', inch: 24, aspect: '16:9', x: 1920, y: 1080 },\r\n                        { label: '25\u201d 1080p \u00b7 16:9', inch: 25, aspect: '16:9', x: 1920, y: 1080 },\r\n                        { label: '27\u201d 1080p \u00b7 16:9', inch: 27, aspect: '16:9', x: 1920, y: 1080 },\r\n                        { label: '27\u201d 1440p \u00b7 16:9', inch: 27, aspect: '16:9', x: 2560, y: 1440 },\r\n                        { label: '27\u201d 4K \u00b7 16:9', inch: 27, aspect: '16:9', x: 3840, y: 2160 },\r\n                        { label: '32\u201d 1440p \u00b7 16:9', inch: 32, aspect: '16:9', x: 2560, y: 1440 },\r\n                        { label: '32\u201d 4K \u00b7 16:9', inch: 32, aspect: '16:9', x: 3840, y: 2160 },\r\n                        { label: '34\u201d UWQHD \u00b7 21:9', inch: 34, aspect: '21:9', x: 3440, y: 1440 },\r\n                        { label: '38\u201d UWQHD+ \u00b7 21:9', inch: 38, aspect: '21:9', x: 3840, y: 1600 },\r\n                        { label: '40\u201d 5K2K \u00b7 21:9', inch: 40, aspect: '21:9', x: 5120, y: 2160 },\r\n                        { label: '42\u201d 4K OLED \u00b7 16:9', inch: 42, aspect: '16:9', x: 3840, y: 2160 },\r\n                        { label: '45\u201d Ultrawide \u00b7 21:9', inch: 45, aspect: '21:9', x: 3440, y: 1440 },\r\n                        { label: '49\u201d DQHD \u00b7 32:9', inch: 49, aspect: '32:9', x: 5120, y: 1440 },\r\n                        { label: '57\u201d Dual 4K \u00b7 32:9', inch: 57, aspect: '32:9', x: 7680, y: 2160 },\r\n                        { label: 'Personalizado', custom: true }\r\n                    ];\r\n\r\n                    const aspects = [\r\n                        { label: '16:9', value: '16:9', w: 16, h: 9 },\r\n                        { label: '16:10', value: '16:10', w: 16, h: 10 },\r\n                        { label: '21:9', value: '21:9', w: 21, h: 9 },\r\n                        { label: '32:9', value: '32:9', w: 32, h: 9 },\r\n                        { label: '3:2', value: '3:2', w: 3, h: 2 },\r\n                        { label: '4:3', value: '4:3', w: 4, h: 3 }\r\n                    ];\r\n\r\n                    function monitorFromPreset(preset){\r\n                        return { inch: preset.inch, aspect: preset.aspect, x: preset.x, y: preset.y, preset: preset.label };\r\n                    }\r\n\r\n                    const state = {\r\n                        mode: 'side',\r\n                        showStand: true,\r\n                        a: monitorFromPreset(presets[0]),\r\n                        b: monitorFromPreset(presets[3])\r\n                    };\r\n\r\n                    const stage = root.querySelector('[data-stage]');\r\n                    const layer = root.querySelector('[data-layer]');\r\n                    const monA = root.querySelector('[data-monitor=\"a\"]');\r\n                    const monB = root.querySelector('[data-monitor=\"b\"]');\r\n\r\n                    function qs(sel){ return root.querySelector(sel); }\r\n                    function qsa(sel){ return Array.from(root.querySelectorAll(sel)); }\r\n                    function clamp(n, min, max){ return Math.max(min, Math.min(max, n)); }\r\n                    function fmtNumber(n){ return (Math.round(n * 10) \/ 10).toLocaleString((globalThis.mgI18n?.locale || 'es-ES'), { maximumFractionDigits: 1 }); }\r\n                    function fmtCm(n){ return fmtNumber(n) + ' cm'; }\r\n                    function aspectObj(value){ return aspects.find(a => a.value === value) || aspects[0]; }\r\n                    function cleanNum(v, fallback){ const n = parseFloat(String(v).replace(',', '.')); return Number.isFinite(n) ? n : fallback; }\r\n                    function aspectRatio(value){\r\n                        const a = aspectObj(value);\r\n                        return a.w \/ a.h;\r\n                    }\r\n                    function detectAspectFromResolution(x, y){\r\n                        const rx = Number(x);\r\n                        const ry = Number(y);\r\n                        if (!Number.isFinite(rx) || !Number.isFinite(ry) || rx <= 0 || ry <= 0) return null;\r\n                        const ratio = rx \/ ry;\r\n                        let best = null;\r\n                        aspects.forEach(a => {\r\n                            const target = a.w \/ a.h;\r\n                            const diff = Math.abs(ratio - target) \/ target;\r\n                            if (!best || diff < best.diff) best = { value: a.value, label: a.label, diff, ratio };\r\n                        });\r\n                        \/\/ Tolerancia suficientemente flexible para formatos reales como 3440\u00d71440, 3840\u00d71600 o 5120\u00d72160.\r\n                        return best && best.diff <= 0.085 ? best : null;\r\n                    }\r\n                    function isAspectCoherent(m){\r\n                        const detected = detectAspectFromResolution(m.x, m.y);\r\n                        return !detected || detected.value === m.aspect;\r\n                    }\r\n                    function updateRatioStatus(id){\r\n                        const box = qs('[data-ratio-status=\"' + id + '\"]');\r\n                        const copy = qs('[data-ratio-copy=\"' + id + '\"]');\r\n                        const fix = qs('[data-fix-aspect=\"' + id + '\"]');\r\n                        if (!box || !copy || !fix) return;\r\n                        const m = state[id];\r\n                        const detected = detectAspectFromResolution(m.x, m.y);\r\n                        const hasWarning = detected && detected.value !== m.aspect;\r\n                        box.classList.toggle('is-visible', !!hasWarning);\r\n                        if (hasWarning) {\r\n                            copy.innerHTML = (globalThis.mgTHtml || (value => value))('La resoluci\u00f3n parece <strong>' + detected.label + '<\/strong>, pero el formato elegido es <strong>' + m.aspect + '<\/strong>.');\r\n                            fix.textContent = (globalThis.mgT || (value => value))('Ajustar a ' + detected.label);\r\n                            fix.dataset.targetAspect = detected.value;\r\n                        } else {\r\n                            copy.textContent = '';\r\n                            fix.dataset.targetAspect = '';\r\n                        }\r\n                    }\r\n                    function screenData(m){\r\n                        const a = aspectObj(m.aspect);\r\n                        const diagCm = clamp(m.inch, 10, 90) * 2.54;\r\n                        const ratioDiag = Math.sqrt(a.w * a.w + a.h * a.h);\r\n                        const wCm = diagCm * a.w \/ ratioDiag;\r\n                        const hCm = diagCm * a.h \/ ratioDiag;\r\n                        const area = wCm * hCm;\r\n                        const ppi = Math.sqrt(m.x * m.x + m.y * m.y) \/ m.inch;\r\n                        return { wCm, hCm, area, ppi };\r\n                    }\r\n\r\n                    function createDropdown(container, items, selected, onChange){\n                        const select = document.createElement('select');\n                        select.className = 'mg-size-select';\n                        select.id = root.id + '-' + container.dataset.dd + '-native';\n                        select.hidden = true;\n                        select.setAttribute('aria-label', (globalThis.mgT || (value => value))(container.dataset.label));\n                        items.forEach(item => select.add(new Option(item.label, item.value)));\n                        const trigger = document.createElement('button');\n                        trigger.type = 'button';\n                        trigger.className = 'mg-size-select-trigger';\n                        trigger.id = root.id + '-' + container.dataset.dd;\n                        trigger.setAttribute('role', 'combobox');\n                        trigger.setAttribute('aria-label', (globalThis.mgT || (value => value))(container.dataset.label));\n                        trigger.setAttribute('aria-haspopup', 'listbox');\n                        trigger.setAttribute('aria-expanded', 'false');\n                        const menu = document.createElement('div');\n                        menu.className = 'mg-size-select-menu';\n                        menu.id = trigger.id + '-options';\n                        menu.hidden = true;\n                        menu.setAttribute('role', 'listbox');\n                        menu.setAttribute('aria-label', (globalThis.mgT || (value => value))(container.dataset.label));\n                        trigger.setAttribute('aria-controls', menu.id);\n                        const text = document.createElement('span');\n                        text.className = 'mg-size-select-value';\n                        const arrow = document.createElement('span');\n                        arrow.className = 'mg-size-select-chevron';\n                        arrow.setAttribute('aria-hidden', 'true');\n                        trigger.append(text, arrow);\n                        let active = 0, search = '', searchTimer, anchorRect;\n                        const options = items.map((item, index) => {\n                            const option = document.createElement('div');\n                            option.id = menu.id + '-' + index;\n                            option.className = 'mg-size-select-option';\n                            option.setAttribute('role', 'option');\n                            const label = document.createElement('span');\n                            const parts = item.label.split(' \u00b7 ');\n                            const title = document.createElement('strong');\n                            title.textContent = (globalThis.mgT || (value => value))(parts[0]);\n                            label.append(title);\n                            if (parts[1]) {\n                                const detail = document.createElement('small');\n                                detail.textContent = (globalThis.mgT || (value => value))('Formato ' + parts[1]);\n                                label.append(detail);\n                            }\n                            const check = document.createElement('span');\n                            check.className = 'mg-size-select-check';\n                            check.textContent = (globalThis.mgT || (value => value))('\u2713');\n                            check.setAttribute('aria-hidden', 'true');\n                            option.append(label, check);\n                            option.addEventListener('pointerdown', e => e.preventDefault());\n                            option.addEventListener('click', () => choose(index));\n                            menu.append(option);\n                            return option;\n                        });\n                        function setText(value) {\n                            select.value = value;\n                            active = Math.max(0, items.findIndex(item => item.value === value));\n                            text.textContent = (globalThis.mgT || (value => value))(items[active].label);\n                            options.forEach((option, index) => option.setAttribute('aria-selected', String(index === active)));\n                        }\n                        function close() {\n                            menu.hidden = true;\n                            trigger.setAttribute('aria-expanded', 'false');\n                            trigger.removeAttribute('aria-activedescendant');\n                            search = '';\n                            clearTimeout(searchTimer);\n                        }\n                        function highlight(index) {\n                            active = clamp(index, 0, items.length - 1);\n                            options.forEach((option, i) => option.classList.toggle('is-highlighted', i === active));\n                            trigger.setAttribute('aria-activedescendant', options[active].id);\n                            const optionRect = options[active].getBoundingClientRect();\n                            const menuRect = menu.getBoundingClientRect();\n                            if (optionRect.top < menuRect.top + 6) menu.scrollTop -= menuRect.top + 6 - optionRect.top;\n                            if (optionRect.bottom > menuRect.bottom - 6) menu.scrollTop += optionRect.bottom - menuRect.bottom + 6;\n                        }\n                        function open() {\n                            Object.values(dropdowns).forEach(dropdown => dropdown.close());\n                            const rect = trigger.getBoundingClientRect();\n                            anchorRect = rect;\n                            const width = Math.min(Math.max(rect.width, 220), window.innerWidth - 32);\n                            const below = window.innerHeight - rect.bottom - 16;\n                            const above = rect.top - 16;\n                            const upwards = below < 220 && above > below;\n                            const height = Math.max(80, Math.min(308, upwards ? above : below));\n                            menu.style.width = width + 'px';\n                            menu.style.left = Math.max(16, Math.min(rect.left, window.innerWidth - width - 16)) + 'px';\n                            menu.style.maxHeight = height + 'px';\n                            menu.style.top = upwards ? 'auto' : (rect.bottom + 6) + 'px';\n                            menu.style.bottom = upwards ? (window.innerHeight - rect.top + 6) + 'px' : 'auto';\n                            menu.hidden = false;\n                            trigger.setAttribute('aria-expanded', 'true');\n                            highlight(Math.max(0, items.findIndex(item => item.value === select.value)));\n                        }\n                        function choose(index) {\n                            setText(items[index].value);\n                            close();\n                            onChange(items[index].value, items[index]);\n                            trigger.focus({preventScroll: true});\n                        }\n                        trigger.addEventListener('click', () => menu.hidden ? open() : close());\n                        trigger.addEventListener('keydown', e => {\n                            if (e.key === 'Tab') { close(); return; }\n                            if (e.key === 'Escape') { e.preventDefault(); close(); return; }\n                            if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(e.key)) {\n                                e.preventDefault();\n                                if (menu.hidden) { open(); if (e.key === 'Home') highlight(0); if (e.key === 'End') highlight(items.length - 1); return; }\n                                highlight(e.key === 'Home' ? 0 : e.key === 'End' ? items.length - 1 : active + (e.key === 'ArrowDown' ? 1 : -1));\n                            } else if (e.key === 'Enter' || e.key === ' ') {\n                                e.preventDefault();\n                                menu.hidden ? open() : choose(active);\n                            } else if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {\n                                e.preventDefault();\n                                if (menu.hidden) open();\n                                search += e.key.toLocaleLowerCase();\n                                clearTimeout(searchTimer);\n                                searchTimer = setTimeout(() => { search = ''; }, 700);\n                                const found = items.findIndex(item => item.label.toLocaleLowerCase().startsWith(search));\n                                if (found >= 0) highlight(found);\n                            }\n                        });\n                        document.addEventListener('pointerdown', e => { if (!container.contains(e.target)) close(); });\n                        document.addEventListener('scroll', e => {\n                            if (menu.hidden || menu.contains(e.target) || !anchorRect) return;\n                            const rect = trigger.getBoundingClientRect();\n                            if (Math.abs(rect.top - anchorRect.top) > 1 || Math.abs(rect.left - anchorRect.left) > 1) close();\n                        }, true);\n                        window.addEventListener('resize', close);\n                        select.addEventListener('change', () => {\n                            const item = items.find(item => item.value === select.value);\n                            if (item) { setText(item.value); close(); onChange(item.value, item); }\n                        });\n                        container.replaceChildren(select, trigger, menu);\n                        setText(selected);\n                        return {setText, close};\n                    }\r\n\r\n                    const dropdowns = {};\r\n                    ['a','b'].forEach(id => {\r\n                        dropdowns['preset-' + id] = createDropdown(qs('[data-dd=\"preset-' + id + '\"]'), presets.map(p => ({ label: p.label, value: p.label, data: p })), presets[id === 'a' ? 0 : 3].label, (value, item) => {\r\n                            const p = item.data;\r\n                            state[id].preset = value;\r\n                            if (!p || p.custom) { qs('[data-custom=\"' + id + '\"]').open = true; return; }\n                            state[id] = monitorFromPreset(p);\r\n                            syncInputs();\r\n                            update();\r\n                        });\r\n                        dropdowns['aspect-' + id] = createDropdown(qs('[data-dd=\"aspect-' + id + '\"]'), aspects.map(a => ({ label: a.label, value: a.value })), state[id].aspect, (value) => {\r\n                            state[id].aspect = value;\r\n                            markCustom(id);\r\n                            syncInputs();\r\n                            update();\r\n                        });\r\n                    });\r\n\r\n                    function markCustom(id){\r\n                        const custom = presets[presets.length - 1];\r\n                        state[id].preset = custom.label;\r\n                        dropdowns['preset-' + id].setText(custom.label);\r\n                    }\r\n\r\n                    function syncInputs(){\r\n                        ['a','b'].forEach(id => {\r\n                            qs('[data-field=\"inch-' + id + '\"]').value = Math.round(state[id].inch * 10) \/ 10;\r\n                            qs('[data-field=\"resx-' + id + '\"]').value = Math.round(state[id].x);\r\n                            qs('[data-field=\"resy-' + id + '\"]').value = Math.round(state[id].y);\r\n                            dropdowns['aspect-' + id].setText(state[id].aspect);\r\n                            dropdowns['preset-' + id].setText(state[id].preset);\r\n                            qs('[data-mini-' + id + ']').textContent = (globalThis.mgT || (value => value))((Math.round(state[id].inch * 10) \/ 10).toLocaleString((globalThis.mgI18n?.locale || 'es-ES')) + '\u201d \u00b7 ' + state[id].aspect);\r\n                            updateRatioStatus(id);\r\n                        });\r\n                    }\r\n\r\n                    qsa('.mg-size-input').forEach(input => {\r\n                        input.addEventListener('input', () => {\r\n                            const field = input.dataset.field;\r\n                            const id = field.slice(-1);\r\n                            if (field.startsWith('inch')) state[id].inch = clamp(cleanNum(input.value, state[id].inch), 10, 90);\r\n                            if (field.startsWith('resx')) state[id].x = clamp(Math.round(cleanNum(input.value, state[id].x)), 640, 10000);\r\n                            if (field.startsWith('resy')) state[id].y = clamp(Math.round(cleanNum(input.value, state[id].y)), 480, 5000);\r\n                            markCustom(id);\r\n                            update();\r\n                        });\r\n                        input.addEventListener('change', () => { syncInputs(); update(); });\r\n                    });\r\n\r\n                    qsa('[data-step]').forEach(btn => {\r\n                        btn.addEventListener('click', () => {\r\n                            const id = btn.dataset.step;\r\n                            const delta = parseFloat(btn.dataset.delta || '0');\r\n                            state[id].inch = clamp((Math.round((state[id].inch + delta) * 10) \/ 10), 10, 90);\r\n                            markCustom(id);\r\n                            syncInputs();\r\n                            update();\r\n                        });\r\n                    });\r\n\r\n                    qsa('[data-fix-aspect]').forEach(btn => {\r\n                        btn.addEventListener('click', (e) => {\r\n                            e.stopPropagation();\r\n                            const id = btn.dataset.fixAspect;\r\n                            const target = btn.dataset.targetAspect;\r\n                            if (!id || !target) return;\r\n                            state[id].aspect = target;\r\n                            markCustom(id);\r\n                            btn.classList.add('is-fixing');\r\n                            window.setTimeout(() => btn.classList.remove('is-fixing'), 260);\r\n                            syncInputs();\r\n                            update();\r\n                        });\r\n                    });\r\n\r\n                    qsa('[data-mode]').forEach(btn => {\r\n                        btn.addEventListener('click', () => {\r\n                            state.mode = btn.dataset.mode;\r\n                            syncModeButtons();\r\n                            update();\r\n                        });\r\n                    });\r\n\r\n                    function syncModeButtons(){\r\n                        qsa('[data-mode]').forEach(button => {\r\n                            const selected = button.dataset.mode === state.mode;\r\n                            button.classList.toggle('is-active', selected);\r\n                            button.setAttribute('aria-pressed', String(selected));\r\n                        });\r\n                    }\r\n\r\n                    const standBtn = qs('[data-toggle-stand]');\n                    function pulseToggleButton(btn) {\r\n                        if (!btn) return;\r\n                        btn.classList.remove('is-toggling');\r\n                        void btn.offsetWidth;\r\n                        btn.classList.add('is-toggling');\r\n                        window.setTimeout(() => btn.classList.remove('is-toggling'), 380);\r\n                    }\r\n\r\n                    if (standBtn) standBtn.addEventListener('click', () => {\r\n                        state.showStand = !state.showStand;\r\n                        root.classList.toggle('mg-size-no-stand', !state.showStand);\r\n                        standBtn.classList.toggle('is-active', state.showStand);\r\n                        standBtn.setAttribute('aria-pressed', state.showStand ? 'true' : 'false');\r\n                        pulseToggleButton(standBtn);\r\n                        update();\r\n                    });\r\n\r\n                    qs('[data-swap]').addEventListener('click', (e) => {\r\n                        const btn = e.currentTarget;\r\n                        const before = {\r\n                            a: monA.getBoundingClientRect(),\r\n                            b: monB.getBoundingClientRect()\r\n                        };\r\n\r\n                        root.classList.add('mg-size-is-swapping');\r\n                        if (btn) btn.classList.add('is-swapping');\r\n\r\n                        const oldA = {...state.a};\r\n                        state.a = {...state.b};\r\n                        state.b = oldA;\r\n                        syncInputs();\r\n                        update(true);\r\n\r\n                        const after = {\r\n                            a: monA.getBoundingClientRect(),\r\n                            b: monB.getBoundingClientRect()\r\n                        };\r\n\r\n                        animateSwapElement(monA, before.b, after.a);\r\n                        animateSwapElement(monB, before.a, after.b);\r\n\r\n                        window.setTimeout(() => {\r\n                            root.classList.remove('mg-size-is-swapping');\r\n                            if (btn) btn.classList.remove('is-swapping');\r\n                        }, 420);\r\n                    });\r\n\r\n                    function animateSwapElement(el, fromRect, toRect){\r\n                        if (!el || !fromRect || !toRect) return;\r\n                        const dx = fromRect.left - toRect.left;\r\n                        const dy = fromRect.top - toRect.top;\r\n                        const visibleMove = Math.abs(dx) + Math.abs(dy);\r\n\r\n                        el.style.transition = 'none';\r\n                        if (visibleMove < 4) {\r\n                            el.style.setProperty('--mg-flip-scale', '.985');\r\n                        } else {\r\n                            el.style.setProperty('--mg-flip-x', dx.toFixed(1) + 'px');\r\n                            el.style.setProperty('--mg-flip-y', dy.toFixed(1) + 'px');\r\n                            el.style.setProperty('--mg-flip-scale', '.992');\r\n                        }\r\n\r\n                        el.getBoundingClientRect();\r\n                        el.style.transition = 'transform .38s cubic-bezier(.2,.9,.2,1), opacity .22s ease, filter .22s ease';\r\n                        requestAnimationFrame(() => {\r\n                            el.style.setProperty('--mg-flip-x', '0px');\r\n                            el.style.setProperty('--mg-flip-y', '0px');\r\n                            el.style.setProperty('--mg-flip-scale', '1');\r\n                        });\r\n\r\n                        window.setTimeout(() => {\r\n                            el.style.transition = '';\r\n                            el.style.removeProperty('--mg-flip-x');\r\n                            el.style.removeProperty('--mg-flip-y');\r\n                            el.style.removeProperty('--mg-flip-scale');\r\n                        }, 430);\r\n                    }\r\n\r\n                    qs('[data-reset]').addEventListener('click', (e) => {\r\n                        const resetBtn = e.currentTarget;\r\n                        if (resetBtn) {\r\n                            resetBtn.classList.add('is-resetting');\r\n                            window.setTimeout(() => resetBtn.classList.remove('is-resetting'), 520);\r\n                        }\r\n                        state.mode = 'side';\r\n                        state.showStand = true;\n                        root.classList.remove('mg-size-no-stand');\n                        if (standBtn) {\r\n                            standBtn.classList.add('is-active');\r\n                            standBtn.setAttribute('aria-pressed', 'true');\r\n                            pulseToggleButton(standBtn);\r\n                        }\r\n                        state.a = monitorFromPreset(presets[0]);\n                        state.b = monitorFromPreset(presets[3]);\n                        qsa('[data-custom]').forEach(details => { details.open = false; });\n                        syncModeButtons();\r\n                        syncInputs();\r\n                        update(true);\r\n                    });\r\n\r\n\r\n\r\n                    const localDesign = document.body.classList.contains('mg-design');\r\n                    function update(force){\r\n                        updateRatioStatus('a');\r\n                        updateRatioStatus('b');\r\n                        const da = screenData(state.a);\r\n                        const db = screenData(state.b);\r\n                        const rect = stage.getBoundingClientRect();\r\n                        \/\/ Fit both screens to the actual drawing area, also below 320 px.\r\n                        const stageW = localDesign ? Math.max(1, stage.clientWidth) : Math.max(320, rect.width);\r\n                        const stageH = localDesign ? Math.max(1, stage.clientHeight) : Math.max(360, rect.height);\r\n                        const bottom = state.showStand ? Math.min(74, Math.max(34, stageW * .085)) : 24;\n                        const topPad = 22;\r\n                        const usableH = Math.max(localDesign ? 1 : 260, stageH - bottom - topPad);\r\n                        let scale;\r\n                        let ax, ay, bx, by;\r\n                        const gap = localDesign ? Math.max(24, stageW * .04) : Math.max(52, stageW * .07);\r\n\r\n                        if (state.mode === 'overlay') {\r\n                            layer.classList.add('mg-size-overlay');\r\n                            const maxW = Math.max(da.wCm, db.wCm);\r\n                            const maxH = Math.max(da.hCm, db.hCm);\r\n                            scale = Math.min((stageW * .78) \/ maxW, (usableH * .94) \/ maxH);\r\n                            scale = clamp(scale, localDesign ? .1 : 3.2, 15);\r\n                            const cx = stageW \/ 2;\r\n                            const base = stageH - bottom;\r\n                            ax = cx - da.wCm * scale \/ 2;\r\n                            bx = cx - db.wCm * scale \/ 2;\r\n                            ay = base - da.hCm * scale;\r\n                            by = base - db.hCm * scale;\r\n                        } else {\r\n                            layer.classList.remove('mg-size-overlay');\r\n                            const totalW = da.wCm + db.wCm;\r\n                            const maxH = Math.max(da.hCm, db.hCm);\r\n                            scale = Math.min((stageW * .90 - gap) \/ totalW, (usableH * .94) \/ maxH);\r\n                            scale = clamp(scale, localDesign ? .1 : 2.2, 13.5);\r\n                            const groupW = (da.wCm + db.wCm) * scale + gap;\r\n                            let startX = (stageW - groupW) \/ 2;\r\n                            const base = stageH - bottom;\r\n                            ax = startX;\r\n                            bx = startX + da.wCm * scale + gap;\r\n                            ay = base - da.hCm * scale;\r\n                            by = base - db.hCm * scale;\r\n                        }\r\n\r\n                        applyMonitor(monA, state.a, da, scale, ax, ay);\r\n                        applyMonitor(monB, state.b, db, scale, bx, by);\r\n\r\n                        qs('[data-screen-inch-a]').textContent = (globalThis.mgT || (value => value))((Math.round(state.a.inch * 10) \/ 10).toLocaleString((globalThis.mgI18n?.locale || 'es-ES')) + '\u201d');\r\n                        qs('[data-screen-inch-b]').textContent = (globalThis.mgT || (value => value))((Math.round(state.b.inch * 10) \/ 10).toLocaleString((globalThis.mgI18n?.locale || 'es-ES')) + '\u201d');\r\n                        qs('[data-screen-res-a]').textContent = (globalThis.mgT || (value => value))(Math.round(state.a.x) + '\u00d7' + Math.round(state.a.y));\r\n                        qs('[data-screen-res-b]').textContent = (globalThis.mgT || (value => value))(Math.round(state.b.x) + '\u00d7' + Math.round(state.b.y));\r\n\r\n                        const areaDiff = ((db.area \/ da.area) - 1) * 100;\r\n                        const hDiff = ((db.hCm \/ da.hCm) - 1) * 100;\r\n                        qs('[data-width-compare]').innerHTML = (globalThis.mgTHtml || (value => value))(metricLine(fmtNumber(da.wCm), fmtNumber(db.wCm), 'cm'));\r\n                        qs('[data-height-compare]').innerHTML = (globalThis.mgTHtml || (value => value))(metricLine(fmtNumber(da.hCm), fmtNumber(db.hCm), 'cm'));\r\n                        qs('[data-ppi-compare]').innerHTML = (globalThis.mgTHtml || (value => value))(metricLine(Math.round(da.ppi).toLocaleString((globalThis.mgI18n?.locale || 'es-ES')), Math.round(db.ppi).toLocaleString((globalThis.mgI18n?.locale || 'es-ES')), 'PPI'));\r\n\r\n                        qs('[data-verdict-title]').textContent = (globalThis.mgT || (value => value))(Math.abs(areaDiff) < 0.5 ? 'La misma superficie de pantalla' : 'Un ' + Math.abs(Math.round(areaDiff)).toLocaleString((globalThis.mgI18n?.locale || 'es-ES')) + '% ' + (areaDiff > 0 ? 'm\u00e1s' : 'menos') + ' de superficie');\r\n                        qs('[data-verdict-copy]').textContent = (globalThis.mgT || (value => value))(Math.abs(hDiff) < 6 && areaDiff > 20 ? 'El Monitor 2 gana anchura y mantiene una altura similar.' : 'El Monitor 2 comparado con el Monitor 1. Medidas del panel visible.');\r\n                        qs('[data-width-copy]').innerHTML = (globalThis.mgTHtml || (value => value))(deltaCopy(db.wCm - da.wCm, 'cm', 'de ancho'));\r\n                        qs('[data-height-copy]').innerHTML = (globalThis.mgTHtml || (value => value))(deltaCopy(db.hCm - da.hCm, 'cm', 'de alto'));\r\n                        qs('[data-ppi-copy]').innerHTML = (globalThis.mgTHtml || (value => value))(deltaCopy(Math.round(db.ppi - da.ppi), 'PPI', 'de densidad'));\r\n                    }\r\n\r\n\r\n                    function metricLine(a, b, unit){\r\n                        return '<span class=\"mg-size-m1\">' + a + '<\/span><span class=\"mg-size-unit\">' + unit + '<\/span><span class=\"mg-size-arrow\">\u2192<\/span><span class=\"mg-size-m2\">' + b + '<\/span><span class=\"mg-size-unit\">' + unit + '<\/span>';\r\n                    }\r\n\r\n                    function deltaCopy(delta, unit, label){\r\n                        const numeric = typeof delta === 'number' ? delta : 0;\r\n                        if (Math.abs(numeric) < (unit === 'PPI' ? 1 : 0.15)) {\r\n                            return 'Pr\u00e1cticamente igual ' + label + '.';\r\n                        }\r\n                        const abs = unit === 'PPI' ? Math.abs(Math.round(numeric)).toLocaleString((globalThis.mgI18n?.locale || 'es-ES')) : fmtNumber(Math.abs(numeric));\r\n                        if (numeric > 0) {\r\n                            return abs + ' ' + unit + ' m\u00e1s ' + label + '.';\n                        }\r\n                        return abs + ' ' + unit + ' menos ' + label + '.';\n                    }\r\n\r\n                    function applyMonitor(el, m, data, scale, x, y){\n                        el.style.setProperty('--mg-stand-base', Math.min(70, data.wCm * scale * .22) + 'px');\n                        el.style.setProperty('--mg-w', Math.max(localDesign ? 1 : 80, data.wCm * scale) + 'px');\r\n                        el.style.setProperty('--mg-h', Math.max(localDesign ? 1 : 45, data.hCm * scale) + 'px');\r\n                        el.style.setProperty('--mg-x', Math.round(x) + 'px');\r\n                        el.style.setProperty('--mg-y', Math.round(y) + 'px');\r\n                    }\r\n\r\n                    if ('ResizeObserver' in window) {\r\n                        const ro = new ResizeObserver(() => update());\r\n                        ro.observe(stage);\r\n                    } else {\r\n                        window.addEventListener('resize', () => update());\r\n                    }\r\n\r\n                    syncInputs();\r\n                    requestAnimationFrame(() => update(true));\r\n                })();\r\n<\/script>\r\n        <\/section>\n\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Monitor Garage tool Monitor size comparison See how much space you gain when changing monitors. Compare their dimensions, screen area and pixel density. Visual comparison Side by side Overlay Show stand 24\u201d1920\u00d71080 27\u201d2560\u00d71440 Monitor 1 Monitor 2 Monitor 1 24\u201d \u00b7 16:9 Size and resolution Manual adjustment Screen size \u2212 + Format Width in pixels [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"template-tools-full.php","meta":{"_acf_changed":false,"iawp_total_views":786,"footnotes":""},"class_list":["post-4670","page","type-page","status-publish","hentry"],"acf":{"subtitle":"Comparador visual entre monitores a escala real"},"_links":{"self":[{"href":"https:\/\/monitorgarage.com\/en\/wp-json\/wp\/v2\/pages\/4670","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/monitorgarage.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/monitorgarage.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/monitorgarage.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/monitorgarage.com\/en\/wp-json\/wp\/v2\/comments?post=4670"}],"version-history":[{"count":3,"href":"https:\/\/monitorgarage.com\/en\/wp-json\/wp\/v2\/pages\/4670\/revisions"}],"predecessor-version":[{"id":4889,"href":"https:\/\/monitorgarage.com\/en\/wp-json\/wp\/v2\/pages\/4670\/revisions\/4889"}],"wp:attachment":[{"href":"https:\/\/monitorgarage.com\/en\/wp-json\/wp\/v2\/media?parent=4670"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}