所以，
我正在寻求帮助，使一个相当简单的页面在某些移动设备上更具有友好性，因为当前它在某些移动设备上看起来相当丑陋:S
我已经尝试正确定位一些东西，并使用像素而不是百分比，因为我只是在每个角落（顶部和底部栏）做一些事情，并且我尝试了一些缩放代码，使图像在某些屏幕宽度下不显示
能否有人帮助我纠正我的HTML/CSS，以使其完全兼容，因为当我进行更改时，它从未完全奏效。
HTML：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta content="true" name="HandheldFriendly" />
<meta content="width=device-width" name="viewport" />
<meta content="width=device-width,initial-scale=0.75" name="viewport" />
<title>Website.com</title>
<link href="testing.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header_container">
<div id="header">
<div class="headimage">
<a href="http://website.com/" target="_blank">
<img alt="" class="headimager" src="http://placehold.it/350x95/" />
</a>
</div>
<select class="class-selector">
<option value="">- Testing Dropdown -</option>
</select>
<div class="classcycler"><a href="javascript: void(0);" id="NextPage"><font color="#EFEFEF">Next Page</font></a> <font color="red">|</font> <a href="javascript: void(0);" id="PreviousPage"><font color="#EFEFEF">Previous Page</font></a>
</div>
<div class="classcycler2"><a class="downclass" href="javascript: void(0);"><font color="#EFEFEF">Scroll Down</font></a> <font color="red">|</font> <a class="upclass" href="javascript: void(0);"><font color="#EFEFEF">Scroll Up</font></a>
</div>
<div class="headright"><a class="TOPJS" href="javascript: void(0);"><font color="#EFEFEF">Up to Top</font></a>
<br/> <a class="KEYJS" href="javascript: void(0);"><font color="#EFEFEF">Down to Bot</font></a>
</div>
</div>
</div>
<div id="container">
<table id="gradient-style" summary=""> <tbody><thead><tr><th colspan="30">Data>>>>>Test>>>>>123>>>>>Please>>>>>Help>>>>>Stackoverflow>>>>>Testing>>>>>Here>>>>>Data>>>>>Test>>>>>123>>>>>Please>>>>>Help>>>>>Stackoverflow>>>>>Testing>>>>>Here>>>>>Data>>>>>Test>>>>>123>>>>>Please>>>>>Help>>>>>Stackoverflow>>>>>Testing>>>>>Here>>>>>Data>>>>>Test>>>>>123>>>>>Please>>>>>Help>>>>>Stackoverflow>>>>>Testing>>>>>Here>>>>></th></tr></thead></tbody></table>
</div>
<div id="footer_container">
<div id="footer">
<div class="footimage">
<a href="http://website.com/" target="_blank">
<img alt="" class="footimager" src="http://placehold.it/350x95/" />
</a>
</div>
<div class="footleft">
<a class="def" href="javascript: void(0);"></a>
</div>
<div class="footright">
<a class="abc" href="javascript: void(0);"></a>
</div>
</div>
</div>
</body>
</html>
CSS
body {
background: #F0F0F0;
line-height: 1.6em;
margin: 0;
overflow-x: scroll;
padding: 0;
}
#header_container {
background: url(gradhead.png) repeat-x #111625;
border: 0 solid #666;
height: 80px;
left: 0;
position: fixed;
top: 0;
width: 100%;
}
#footer .headimage {
position: relative;
}
#header .headright {
font-size: 20px;
position: fixed;
right: 10px;
text-align: right;
top: 15px;
}
#header .class-selector {
left: 10px;
position: fixed;
top: 5px;
}
#header .classcycler {
font-size: 20px;
left: 10px;
position: fixed;
top: 30px;
}
#header .classcycler2 {
font-size: 20px;
left: 10px;
position: fixed;
top: 50px;
}
#container {
margin: 0 auto;
padding: 80px 0;
width: 100%;
}
#footer_container {
background: url(gradhead.png) repeat-x #111625;
border: 0 solid #666;
bottom: 0;
height: 80px;
left: 0;
position: fixed;
width: 100%;
}
#footer .footleft {
font-size: 20px;
left: 10px;
position: absolute;
top: 10px;
}
#footer .footright {
font-size: 20px;
position: absolute;
right: 10px;
top: 10px;
}
#footer .footimage {
position: relative;
top: -13px;
}
#footer .footleft a {
background: url(http://placehold.it/60x60/) no-repeat;
display: block;
height: 60px;
width: 60px;
}
#footer .footleft a:hover {
background: url(http://placehold.it/60x60/000) no-repeat;
}
#footer .footright a {
background: url(http://placehold.it/60x60/) no-repeat;
display: block;
height: 60px;
width: 60px;
}
#footer .footright a:hover {
background: url(http://placehold.it/60x60/000) no-repeat;
}
#header,#footer {
color: #ECECEC;
height: 100%;
margin: 0 auto;
position: relative;
text-align: center;
width: 100%;
}
@media screen and max-width 600px {
.headimager {
display: none;
}
}
@media screen and max-width 450px {
.footimager {
display: none;
}
}
没有jsfiddle链接的原因是它不允许我放置meta标签。
JavaScript
$("a.def").click(function () {
$('body').animate({
"scrollLeft": "-=404"
}, 200);
});
$("a.abc").click(function () {
$("body").animate({
"scrollLeft": "+=404"
}, 200);
});