Setting Minimum Size Limit for a Window Minimization of Browser

Setting minimum size limit for a window minimization of browser?

You can try

body {  min-width:600px; }

You will get a horizontal scrollbar once the viewport gets less than 600px. This will work in only modern browsers supporting min-width CSS property.

I don't think it is possible to restrict user from resizing, and it shouldn't be!

css or javascript option to limit sizing browser window size

Hava a look at this question:
Disable Browser Window Resize

To paraphrase:

If you have jQuery you can do something like this:

$(window).resize(function(){
  window.resizeTo(1024,800);
});

However, this will not always work(for example in Safari it only works if there are no other tabs, in Firefox it only works if it is a window launched by window.open or similar), and when it works, it will be super annoying. Add an if test testing width and/or height if you only want to set a min size.

Without jQuery, and testing for size(badly, it resizes the window and checks the document size...):

window.onresize = function() {
    if (window.innerWidth < 900 || window.innerHeight < 600) {
        window.resizeTo(1024,800);
    }
};

Min width in window resizing

You can set min-width property of CSS for body tag. Since this property is not supported by IE6, you can write like:

body{
   min-width:1000px;        /* Suppose you want minimum width of 1000px */
   width: auto !important;  /* Firefox will set width as auto */
   width:1000px;            /* As IE6 ignores !important it will set width as 1000px; */
}

Or:

body{
   min-width:1000px; // Suppose you want minimum width of 1000px
   _width: expression( document.body.clientWidth > 1000 ? "1000px" : "auto" ); /* sets max-width for IE6 */
}

set min-height of a html page

I don't think it's fully possible to restrict the user from resizing the window - see Setting minimum size limit for a window minimization of browser?. You can force it with a popup but min-height only applies to HTML elements, not the browser window itself.

Possibly an answer here that might help.

Browser doesn't scale below 400px?

Chrome cannot resize horizontally below 400px (OS X) or 218px (Windows) but I have a really simple solution to the problem:

1. Dock the web inspector to the right instead of to the bottom
2. Resize the inspector panel - you can now make the browser area really small (down to 0px)

Update: Chrome now allows you to arrange the inspector windows vertically when docked to the right! This really improves the layout.

The HTML and CSS panels fit really well and you even open a small console panel too.
This has allowed me to completely move from Firefox/Firebug to Chrome.

If you want to go a step further look at the web inspector settings (cog icon, bottom-right), and goto the user agent tab. You can set the screen resolution to whatever you like here and even quickly toggle between portrait and landscape.

UPDATE: Here is another really cool tool I've come across. http://lab.maltewassermann.com/viewport-resizer/

---

Related Topics