1

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.

Lewis
  • 1,945
  • 5
  • 26
  • 52

1 Answers1

1

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
   }
}
Khanh TO
  • 48,509
  • 13
  • 99
  • 115
  • I understand the concept, however how do you find the golden values that determine min-width? There are so many display devices out there with all kinds of sizes. How does one target them all without having to target each individual one? Why not get Jquery to render these values for you after fetching the info from the user? – Lewis Nov 08 '15 at 09:17
  • 1
    @Null: when we design a responsive website, I think we should target only a range of sizes and have different styling based on the targeted screen size. If you want to target all of them, I think you were talking about making the layout fluid, we can use different percentages based on the screen size. If you use jQuery, you also have to take care of the cases when the user resizes the window. For more information: http://stackoverflow.com/questions/9780333/fluid-or-fixed-grid-system-in-responsive-design-based-on-twitter-bootstrap – Khanh TO Nov 08 '15 at 09:32