CODEWITHSUNDEEP
twitter-bootstrap
Slava
Slava

Reputation: 6650

in bootstrap, hide HTML element if display size is set to 150%

I have bootstrap-designed website.

I have two devices - a monitor, and a TV.

On my TV I set Display settings / Scale and layout to 150%.

Some horizontally aligned elements don't fit when its in 150% mode.

What's the best way to auto-hide elements that don't fit, when the projection goes to TV?

Thanks.

Upvotes: 1

Views: 1140

Answers (1)

Stevangelista
Stevangelista

Reputation: 1829

You don't so much need to "detect" the zoom setting as just apply a media query based on the viewport size.

For example, if your monitor resolution is 1920px wide, at 100% zoom for a full-screen browser, it will report window.innerWidth = 1920; however, start zooming within the browser and that number will decrease - at 110%=1745px, 125%=1536px and 150%=1280px.

As a result, in your CSS you can apply a corresponding media query; using the examples above & assuming a horizontal screen resolution of 1920px, I would do:

@media screen and (max-width:1280px) {
    .someClassToHideOnTV {display:none}
}

This media query ensures this CSS is only applied when the screen width is 1280px or less, which is the same as 150% zoom on a 1920px screen resolution. Obviously this is not ideal if the site in question will be accessed from phones or tablets (though you could use min-width media queries to account for that) but if you're only interest is your monitor and a TV, based on the screen resolution and corresponding pixel width when zoomed you can achieve the desired result.

Upvotes: 1

Related Questions