Search the Community

I searched, and there isn't much and nothing really current. Is there a code that I could use to hide specific content based on what device my User is using? Specifically, if the the User is using a mobile phone browser. Something along the lines of: if ( !is_mobile( ) ) { } I've tried this, but it didn't work.

Hi I'm trying to find some code that would tell the bit of code that I created what the device width is so I can make this navigation menu dynamic. Meaning: if the device width is 480px and the navigation menu would come to 1024px then using PHP the code would automatically put the <li> items in to a more tab untill the the width is equal or less than 480px. I don't want to use Javascript to do this as I know most of you will recommend using..... Here's my code. Change the variable $deviceWidth to and refresh.... change between 1 and 10. <? $navItems = array("ME", "MUSIC", "VIDEO", "GIGS", "FESTIVALS", "CONTACT"); $deviceWidth = 3; $diffrence = count($navItems) - $deviceWidth; while($diffrence > 0){ $more[] = array_pop($navItems); $diffrence = $diffrence - 1; } foreach($navItems as $nav){ $lower = strtolower($nav); $upper = strtoupper($nav); $lower1 = strtolower($more); $upper1 = strtoupper($more); echo"<li class='Nav'><a href='$lower.php'>$upper</a></li>"; } if(!empty($more)){ echo"<li class='Nav-more'><a href='#'>MORE</a> <ul class='more'>"; foreach($more as $more){ $lower1 = strtolower($more); $upper1 = strtoupper($more); echo "<li class='Nav-more'><a href='$lower1.php'>$upper1</a></li>"; } echo"</ul> </li>"; } ?> And the CSS to give an example. .Navigation { background-image:url(images/H_BG.png); background-repeat:repeat-x; width:100px; height:50px; } .Nav-bar { background-image:url(images/H_BG.png); background-repeat:repeat-x; width:90%; min-width:700px; _width:700px; font-size:20px; line-height:40px; margin-left:5%; margin-right:5%; height:50px; } ul.Nav { list-style:none; margin:0px; padding:0px; } ul.Nav li { font-weight:20; display:inline; } ul.Nav li a { font-weight:bold; text-decoration: none; float: left; color:#7D7D7D; border-left:1px solid #D1D1D1; padding:5px; padding-left:10px; padding-right:10px; } ul.Nav li a:hover { background-image:url(images/H_BG2.png); background-repeat:repeat-x; font-weight:bold; text-decoration: none; float: left; } ul.more { display:none; } ul.Nav li.Nav-more:hover ul.more { display:block; font-weight:bold; text-decoration: none; float: left; color:#111; border-left:1px solid #0f0; padding:5px; padding-left:10px; padding-right:10px; }