Member Avatar for dean8710

can anyone share with, how to set the default windows size?
i mean, want my web page with fixed size of 1368px x 768px..

i do not want other size, or my web looks weird...

  • 2 Contributors
  • 4 Replies
  • 113 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by dean8710

Dani AI

Generated

Following ’s intent and ’s clarification, the pragmatic ways to make content occupy a strict 1368×768 canvas inside a page are: place all UI inside a fixed-size wrapper and let it scroll on smaller viewports, or scale that wrapper to fit the available viewport. Below are compact, ready-to-use patterns and practical cautions.

Fixed-size wrapper (centered, scrollable):

<!-- HTML -->
<div class="viewport-wrap">
  <div class="fixed-canvas">
    <!-- page content sized for 1368x768 -->
  </div>
</div>

/* CSS */
html,body { height:100%; margin:0; }
.viewport-wrap { display:flex; align-items:center; justify-content:center; min-height:100vh; background:#f3f3f3; }
.fixed-canvas { width:1368px; height:768px; overflow:auto; box-sizing:border-box; background:#fff; }

Scale-to-fit approach (keeps layout proportions on smaller screens):

<script>
(function(){
  var TW = 1368, TH = 768;
  var wrap = document.querySelector('.fixed-canvas');
  if (!wrap) return;
  function rescale(){
    var sx = window.innerWidth / TW;
    var sy = window.innerHeight / TH;
    var s = Math.min(sx, sy, 1);
    wrap.style.transformOrigin = 'top left';
    wrap.style.transform = 'scale(' + s + ')';
    wrap.parentElement.style.height = Math.ceil(TH * s) + 'px';
  }
  window.addEventListener('resize', rescale);
  window.addEventListener('load', rescale);
})();
</script>

Notes and trade-offs: lock-sized layouts will cause horizontal/vertical scrolling or tiny text on small screens and can harm accessibility. The scale method keeps proportions but can blur text on some browsers and complicate hit-testing. Add <meta name="viewport" content="width=device-width, initial-scale=1"> for predictable mobile behavior. For long-term maintainability, consider responsive or hybrid designs (media queries, fluid layouts, or CSS grid) so the interface adapts rather than forcing a single resolution. Test at the target resolution and on smaller devices/emulated viewports to confirm usability.

Recommended Answers

All 4 Replies

Member Avatar for dantinkakkar

Be clear. Do you mean that you want the WINDOW size or the size of your webpage?

Member Avatar for dean8710

webpage

btw, what are/is the different between either?

Member Avatar for dantinkakkar

Window = size of browser window.

Use CSS to change the size of the page; you cannot change th size of the browser window, and why would you want to do that, by the way?

Member Avatar for dean8710

i got it, tq

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.