CODEWITHSUNDEEP
jqueryhtmlcss
Lewis
Lewis

Reputation: 2178

Using Jquery to set minwidth

Just a small simple question. If I were to use Jquery to detect a users browser window size and then take that value and declare the CSS property min-width with that value; would that be a beneficial way to display a webpage to a user, no matter the viewing device? (smartphones & tablets would be detected using media queries.) (Mainly I'm thinking about users with widescreens etc.)

I was thinking this way I can match the page to fit perfectly using percentages. I.e. something like this.

<div id="one"> < (width = 100%)
  <div id="one">Hello World!</div> < (width = 50%)
  <div id="two">Goodbye world!</div> < (width = 50%)
</div>

The css would work a little like;

#one {
  width :100%
  min-width : (determined by Jquery findings)
}

Apologies if this makes no sense just wanted an opinion or two and a little feedback.

Upvotes: 1

Views: 744

Answers (1)

Khanh TO
Khanh TO

Reputation: 48972

You should use media query instead of jquery:

For example, let's say you want to use a different value for min-width if the screen size is less than or equal to 600px

#one {
     width :100%
     min-width : //your default value for other screen sizes
}    

@media (max-width: 600px) {
   #one {
     width :100%
     min-width : //your value when the screen size is less than or equal to 600px
   }
}

Upvotes: 1

Related Questions