3

I'm sure this is common knowledge for web-developers but I couldn't turn up anything on google.

Some websites, like mine, look different on widescreen monitors than on regular monitors. How can I see what a webpage would look like in widescreen without actually having a widescreen monitor? (scrolls-bars?)

Is there a tool or feature I can enable?

7
  • 1
    Why can't you just resize your browser window to a widescreen aspect ratio? Apr 27, 2012 at 7:19
  • Windows Vista doesn't seem to allow stretching the window too big.
    – dukevin
    Apr 27, 2012 at 7:21
  • I've never used Vista, but I've used both XP and Windows 7, and both let you resize windows to whatever height/width ratio you want. If you have 4:3 monitor, you can just decrease the height of your browser window to 9/16th of the width. If you have a widescreen monitor, you just decrease your width to 4/3rds of the height. Apr 27, 2012 at 7:24
  • 1
    There's definitely a maximum Y stretch for windows on my computer. I know the method you are describing but the window simply will not stretch past a certain width, even if there is more room on the screen
    – dukevin
    Apr 27, 2012 at 7:26
  • Max height/width is irrelevant. If you can't extend the height, just decrease the width. If you can't increase width, just decrease height. You can still achieve whatever aspect ratio you want, unless you're not after a specific aspect ratio and you're talking about how your site looks on higher resolution displays. Apr 27, 2012 at 7:28

6 Answers 6

2

I would recommend you to use a responsive theme for your site or make your site responsive. This way you can eliminate all the possibilities of resolution problems.

eg: Wikipedia uses responsive design

To try how this resposnive design in Wikipedia works just adjust your browser sizez and see how the site adapts to that browser size .

1

Decrease the height of your browser window until you've got the right aspect ratio and then set your browser zoom to something less than 100%. You'll have to do the maths to work out what this would represent for non-zoomed windows.

1

You can use tools such as http://quirktools.com/screenfly/ or http://resolutiontester.com/ to see your website in various resolutions

1

I wondered if you wanted a techique to make your site always display xyz pixels wide?

If so, I added this to my .css

..#Content { width:985px; margin:0px auto; text-align:left; } Then in my html used:

..body>

..div id="Content">

This is all crude, my point is that if you want this, it can be done, and other will show you how to do it much better.

1

Firefox now has this feature built in. Under "Web Developer" click "Reponsive Design View"

0

You want to use relative scaling, using "percents" and not "pixels" since monitors come in all shapes and sizes.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.