Hiding DIVs based on screen resolution [was: Help with PHP (I'm new)]
Discuss Hiding DIVs based on screen resolution [was: Help with PHP (I'm new)] in the CSS Help forum on Dev Shed. Hiding DIVs based on screen resolution [was: Help with PHP (I'm new)] Cascading Style Sheets (CSS) forum discussing all levels of CSS, including CSS1, CSS2 and CSS Positioning. CSS provides a robust way of applying standardized design concepts to your web pages.
Time spent in forums: 21 m 23 sec
Reputation Power: 0
Help with PHP (I'm new)
This is probably an easy fix,
I want a div-tag on my site to appear only when a use screen resolution is greater than 1024px (it's a floating left "fixed" navigation div that doesn't look good on iPhone). Is this possible? Is PHP the right way to do it, or is it possible with CSS too?
Time spent in forums: 1 Month 2 Weeks 2 Days 4 h 42 m 18 sec
Reputation Power: 813
Google for "mobile website" to check common practices of making websites ready for mobile devices.
Time spent in forums: 7 h 47 m 18 sec
Reputation Power: 0
var html = document.getElementsByTagName('html');
var pageWidth = parseInt(getComputedStyle(html,"").getPropertyValue('width'));
// For Browser width use
if (getPageWidth() < 1024) document.getElementById("floatNav").style.display = "none";
// For full screen width use
if (screen.width < 1024) document.getElementById("floatNav").style.display = "none";
Time spent in forums: 6 Months 1 Day 22 h 10 m 33 sec
Reputation Power: 4192
In case it wasn't clear, what Paul-Ninja posted is an example of a Media Query tailored to answer this specific question.
Originally Posted by Galadai
Why use getComputedStyle? IE8 doesn't support it (to be fair, IE8 doesn't support CSS3 Media Queries either). Isn't it easier to use innerWidth and/or clientWidth instead?
The good thing here is that the media query is used to give a style to mobile devices, so it doesn't matter very much that old versions of IE will ignore it. (Though they will show that element even when the browser window less wide than 1024px, which is probably more likely for people who rarely upgrade.)