Member Avatar for vishalkhialani

Hi,
My computer's resolution is 1280x768 but I want to make sites for computers having 1024x768. I cannot change my display resolution as I am having a wide screen laptop and If I force the os then everything thing looks stretched.

I would like to know if there is a tool or some logic I can use to make sites for the said resolution I hate to keep on zooming in firefox for all the sites I make and even surf.

Cheers,
Vishal Khialani

  • 4 Contributors
  • 8 Replies
  • 118 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by stevenpetersen

Dani AI

Generated

A concise set of practical options to reproduce a 1024×768 browsing experience on a 1280×768 laptop, expanding on suggestions already posted by , and .

Modern browsers have built-in responsive viewports so the page can be rendered at exact widths without changing the OS resolution. Chrome and Firefox both let DevTools emulate a 1024×768 viewport (toggle Device/Responsive mode in DevTools and enter custom dimensions). See Chrome DevTools Device Mode for details: Chrome DevTools Device Mode and Firefox’s Responsive Design Mode: MDN Responsive Design Mode.

When pixel-perfect behavior is needed (scrollbars, fonts, OS chrome), remote services or VMs provide real-environment testing. Commercial services like BrowserStack let pages be tested on real machines/browsers at specific resolutions; Microsoft provides downloadable VMs for local testing when a real 1024×768 device is not available.

For regular development, make the layout intentionally constrainable so the site can be judged at target widths without switching resolutions. Example pattern:

.site-wrapper {
  max-width: 1024px;
  margin: 0 auto;
}

Combine that with fluid units (ems/rems and %) so the design degrades gracefully — this reduces dependence on exact screen sizes (the point made). Note: emulating viewport width is not identical to seeing the site on another machine — DPI scaling, default fonts, OS font rendering and browser zoom all change perceived density. For final QA, verify on at least one actual 1024×768 display or a hosted real-device test.

Recommended Answers

All 8 Replies

Member Avatar for codeManJones

Vishal,
Do you use the Web Developer Toolbar addon for firefox? it has a nice "resize" option to preview smaller screen sizes

Member Avatar for vishalkhialani

Vishal,
Do you use the Web Developer Toolbar addon for firefox? it has a nice "resize" option to preview smaller screen sizes

Hi,
I know off it but never really used it.

For example this site ( daniweb.com ) is made for the 1024x768 resolution screen so when I surf and develop for a site like this I can't read the text very easily and I need to keep on zooming and everything has a pixel effect to it. Hence I can't really judge wether the site is having a good user experience or not.

I am searching for a tool which will help me share the same user experience of a person who will be surfing on a 1024 screen on my display if that's at all possible.

Cheers,
Vishal Khialani

Member Avatar for stevenpetersen

what kind of graphics card do you have?

Member Avatar for almostbob

do not full screen the layout software
drag the edges of the window to a 1024*762 size
design in the window

or better ::
Use current W3C recommended best practice:
design the screen layout in ems and % and it will not matter what screen resolution or browser window size
it will lok the same in everything from blackberry to 8 foot projection monitor

Member Avatar for vishalkhialani

do not full screen the layout software
drag the edges of the window to a 1024*762 size
design in the window

or better ::
Use current W3C recommended best practice:
design the screen layout in ems and % and it will not matter what screen resolution or browser window size
it will lok the same in everything from blackberry to 8 foot projection monitor

Yes , this is wht I was looking for a simple and easy to implement solution thanks

Member Avatar for stevenpetersen

i have the newest browser and i found something today that might help. Click tools, the Developer Tools then tools and resize.... I hope that works.

Member Avatar for vishalkhialani

i have the newest browser and i found something today that might help. Click tools, the Developer Tools then tools and resize.... I hope that works.

Hi,
Which browser are you using ? and are you speaking of the extension for firefox called web developer.


Cheers,
Vishal

Member Avatar for stevenpetersen

Explorer 8 in the Menu bar, Click tools, the Developer Tools then tools and resize.... I hope that works.

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.