Oh my GOD! How did I not freaking notice??? Change your Doctype to HTML5, meaning get rid of the very top line of your code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">and replace it with
<!DOCTYPE html>Mobile browsers don't render well without the HTML5 doctype. I had to take a look at my University's mobile website (which I helped create) to realize that we were using HTML5 doctype to get properly sized content.
Try the HTML below.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Language" content="en">
<meta name="description" content="Digital photography">
<title>test</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<style>
@media only screen and (max-device-width: 480px){
#main_picture {
height: auto;
width: 100%:
}
#main_picture img {
width: 100%;
}
}
</style>
</head>
<body>
<div id = "main_picture" style ="width:700px; height:450px; border:3px solid BLACK; margin:0 auto;">
</div>
<p>
<img src = "home_0.jpg" alt = " " class = "active">
</p>
</body>
</html>