Stop window resizing below 768px

Question

I want the entire page(window) to stop resizing below 768px and there should not be any horizontal scroll below 768px. Is there any way to do that?

Answer 1

The browser / window is in the user's control and is dependent on the device also.

Using CSS you can set a minimum width of your page using:

min-width:768px;

However when the user resizes the browser to below this stage, you will see scrollbars appear. You site will no longer resize and get smaller, but the user will need to scroll left and right to see the full content of your page.

As mentioned below, you can hide the scrollbars with

overflow:hidden;

Or to target a specific scrollbar:

overflow-x:hidden;
overflow-y:hidden;

However, the user will still need to scroll sideways to see your full content...

Answer 2

You can't control the size of the window. You can use CSS to set min-width and min-height properties to ensure your page layout stays sane.

Answer 3

If you want to get the size of the window you can do it like this:

var wid = $(window).width();
if(wid> 768){
    // something
}

Bind window resize events using resize event

$(window).on('resize', function(event){
    //here goes the magic
});

Answer 4

Using Jquery

$(document).ready(function(){
    if($(window).width() < 768){
    //do something 
    }
});

Using CSS

@media only screen and (max-width:768px)
   {
   /*do something*/ 
   }