Detect Browser Size And Apply Css For Every Resolution

I have this function that I use to apply some css to a menu when browser is resized or when the menu is rendering on different resolutions. My problem is this, why the browser is

Solution 1:

Use CSS3 and its media queries. Example:

@media (max-width: 500px) {
    /* some CSS for small resolution */
}

@media (min-width: 1000px) {
    /* some CSS for large resolution */
}

Solution 2:

you main you want to create a responsive design this link can help you.

building responsive design you must consider

• Flexible Grid
• Flexible Images
• Media Quires

/* below code play important part of your responsive design without that you cannot achieve what you want */

<meta name="viewport" content="width=device-width" /> /* put this before the end tag of head */

@media (max-width: 320px) {

}

@media (min-width: 720px) {

}

Solution 3:

It's hard to tell from your code, but most likely you are only calling the function once on pageload. In order to make this do what you want, you will have to attach an event listener and call the code each time the window is resized.

As commented above, consider researching Responsive Web Design to utilize native browser functionality so you don't have to roll your own script to do this. A good place to start is an A List Apart article under the same name.

Solution 4:

Media-queries are the best solution as Pavel remarks, besides they're much faster than all the access to the DOM you're making using your code. The compatibility problem with IE8 can be solved using a JavaScript pluging called Respond.js. Haven't tried it but it seems a good solution to your problem.