If Test for Phone or Tablet

[BN_IT_Support]

I have a cms database setup so that the categories view shows all of the entries on a google map:

However in order to get the map to display I have had to set a 700px height for its container.  I've used ipsColumns_collapsePhone to collapse the sidebar on the phone view but does anyone know how I can also detect the phone view to reduce the height of the map container for small screens please:

<div class='ipsColumns ipsColumns_collapsePhone'>
	<div class='ipsColumn ipsColumn_fluid'>
          <div id="map" style="height:700px;"></div>
  	</div>
	<div class='ipsColumn ipsColumn_wide ipsAreaBackground ipsPad_top ipsPad_bottom'>
		<div class='ipsLayout_container'>
			<p class='ipsType_sectionHead ipsPad_bottom'>Categories</p>
			<ul class='ipsForm'>
				<li class='ipsFieldRow ipsFieldRow_checkbox'>
					<span class='ipsCustomInput'>
						<input type='checkbox' id="Clubsbox" onclick="boxclick(this,'Clubs')"> 
						<span></span>
					</span>
					<div class='ipsFieldRow_content'>
						<label for='Clubsbox'>Clubs</label>
					</div>
				</li>
              	<li class='ipsFieldRow ipsFieldRow_checkbox'>
					<span class='ipsCustomInput'>
						<input type='checkbox' id="Beachesbox" onclick="boxclick(this,'Beaches')"> 
						<span></span>
					</span>
					<div class='ipsFieldRow_content'>
						<label for='Beachesbox'>Beaches</label>
					</div>
				</li>
              	<li class='ipsFieldRow ipsFieldRow_checkbox'>
					<span class='ipsCustomInput'>
						<input type='checkbox' id="Swimsbox" onclick="boxclick(this,'Swims')"> 
						<span></span>
					</span>
					<div class='ipsFieldRow_content'>
						<label for='Swimsbox'>Swims</label>
					</div>
				</li>
              	<li class='ipsFieldRow ipsFieldRow_checkbox'>
					<span class='ipsCustomInput'>
						<input type='checkbox' id="Otherbox" onclick="boxclick(this,'Other')"> 
						<span></span>
					</span>
					<div class='ipsFieldRow_content'>
						<label for='Otherbox'>Other</label>
					</div>
				</li>
              </ul>
      	</div>
		<div class='ipsLayout_container ipsPad_top'>
			<p class='ipsType_sectionHead'>A to Z</p>
			<div id="side_bar" style=" height:490px; text-decoration: none; line-height: 25px; overflow:auto;"></div>
		</div>
  	</div>
</div>