Using Jquery to set minwidth

450
December 15, 2016, at 2:38 PM

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.

Answer 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
   }
}
Rent Charter Buses Company
READ ALSO
Denormalize an attribute value - Convert a camelcased value to dash-delimited value

Denormalize an attribute value - Convert a camelcased value to dash-delimited value

I was creating a directive in angularjsIn link I tried to get attributes with attrs

319
Method .children()length behave differently inside and outside of a function

Method .children()length behave differently inside and outside of a function

This is my code in jQueryI have a button (class = "trail"), and a grid of divs with the class="cell"

271
Iterating JSON received from webservice using jQuery

Iterating JSON received from webservice using jQuery

In the simple code snippet below, i am getting a JSON response from a php page and then trying to iterate it and alert out the name field on each JSON objectsBut it doesnt alert out anything

419
Implementation of $(document).ready() function in javascript

Implementation of $(document).ready() function in javascript

I'm new to javascriptI want to know if the following code is a valid implementation of $(document)

496