How to get the same width as the CSS media query checks against

Question

It seems like the isTablet function returns true at later point. Why, and how do I fix it so isTablet says it is a tablet when the CSS media query does.

function isTablet() {
    return $(window).width() >= 768;
}

and

<link href="css/tablet-default.css" media="all and (min-width: 768px)" rel="stylesheet" type="text/css" />

Wouldn't you want the device-width in your media query?otherwise changing the window size may toggle you in and out of the display. — kennebec
– kennebec, Commented Mar 20, 2012 at 15:04

RoToRa · Accepted Answer · 2012-03-20 14:49:58Z

3

Instead of hard coding the width in the isTablet function (following DRY), you could check for the state of an element that changes due to the media queries.

For example, if you have an element which is normally display: none but has display: block for tablets, have isTablet check the visibly of that element instead.

answered Mar 20, 2012 at 14:49

RoToRa

38.5k12 gold badges72 silver badges110 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

corymathews · Accepted Answer · 2012-03-20 13:37:17Z

0

The .width() function does not include paddings or margins.

http://api.jquery.com/width/

That may be the difference you are noticing.

answered Mar 20, 2012 at 13:37

corymathews

12.6k14 gold badges60 silver badges77 bronze badges

Collectives™ on Stack Overflow

How to get the same width as the CSS media query checks against

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related