移动javascript div隐藏

Question

I am trying to use this script to hid a div if you are on a mobile device, and it is not working for me. Is something wrong with my javascript?

<script type="text/javascript">
<!--
if (screen.width <= 640) {
document.getElementById('div2').style.display="block";
document.getElementById('div1').style.display="none";
}
//-->
</script>

Answer 1

You should comment the <!-- at the beginning of your code.

But the best way to do what you want would be the media queries:

<link rel="stylesheet" media="only screen and (max-device-width: 640px)" href="small-device.css" />

This way you could set a small-device.css file with specific styles for the mobile version of your site.

Take a look at this tutorial: http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/