Change menu layout on certain width repsonsive design WordPress - wordpress

Question

I'm developing an responsive WordPress theme.
On a regular computer (full-size) a menu is visiblie like:
<div id="header-menu" role="complementary">
<ul>
<?php wp_list_pages('title_li=&depth=1&link_before=<span>&link_after=</span>'); ?>
</ul>
</div>
On a certain width (for mobile devices and tablets I'd like to replace this menu with a menu like this one:
<div id="header-menu-mobile" role="complementary">
<form action="<?php bloginfo('url'); ?>" method="get">
<?php
$args1e = array(
'depth' => 1,
'child_of' => 0,
'selected' => 0,
'echo' => 1,
'name' => 'page_id');
wp_dropdown_pages( $args1e ); ?>
</form>
<script type="text/javascript"><!--
var dropdown = document.getElementById("page_id");
function onCatChange()
{
if ( dropdown.options[dropdown.selectedIndex].value > 0 )
{
location.href = "<?php echo get_option('home');
?>/?page_id="+dropdown.options[dropdown.selectedIndex].value;
}
}
dropdown.onchange = onCatChange;
--></script>
</div>
I could in the css for a certain width set "header-menu" to hidden... and make "header-menu-mobile" set to visible. I'm kinda tired in my head and there's probably a better solution to make this work.
Any ideas on how?
Kind regards
Johan

Answer 1

You are right about your CSS idea. Stick with it.
Use this standard CSS structure to make your website responsive.
/* Large desktop */
#media (min-width: 1200px) { ... }
/* Portrait tablet to landscape and desktop */
#media (min-width: 768px) and (max-width: 979px) { ... }
/* Landscape phone to portrait tablet */
#media (max-width: 767px) { ... }
/* Landscape phones and down */
#media (max-width: 480px) { ... }

Answer 2

try $_SERVER['HTTP_USER_AGENT'];
it tells you about user operating system and browser. You may frame your code accordingly
example -
if $_SERVER['HTTP_USER_AGENT'] == 'win 8'
echo $menu_for_windows ;
else if $_SERVER['HTTP_USER_AGENT'] =='opera mini'
echo $menu_for_mobile
and so on ..
also
$browser = get_browser(null, true);
echo $browser['platform'] ; exit;
can tell you the user platform