我的网站，http://scissormanmusic.com/在我的机器人上查看它时令人难以置信，它显示时左侧 200(ish)px 被截断。但是当我在台式机/笔记本电脑网络浏览器(如 Firefox、Safari 或 Chrome)上查看它时，不会发生中断。我不知道为什么。解决此问题的最佳方法是什么。这是代码:
<!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 http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> || ScissormanMusic.com || </title>
<script language="javascript">
function simplePreload()
{
var args = simplePreload.arguments;
document.imageArray = new Array(args.length);
for(var i=0; i<args.length; i++)
{
document.imageArray[i] = new Image;
document.imageArray[i].src = args[i];
}
}
simplePreload( 'news.png','newsRO.png','beats.png','beatsRO.png','music.png','musicRO.png','contact.png','contactRO.png','links.png','linksRO.png','scissorsHeader.png','scissorLeftLeftHeader.png','facebook.png','twitter.png','leftHeader.png','rightHeader.png' );
</script>
<style type="text/css">
a:link {color:#222229; text-decoration:none; border:none;}
a:visited {color:#222229; text-decoration:none; border:none;}
a:hover {color:#222229; text-decoration:underline; border:none;}
a:focus {color:#222229; text-decoration:none; border:none;}
a:active {color:#222229; text-decoration:none; border:none;}
html {
background-color:#222229;
margin:auto;
}
body {
background:#222229;
margin:0;
}
#scissorsHeader{
position:fixed center center;
}
#headerLeft {
position:relative;
right:408px;
bottom:347px;
}
#headerLeftLeft {
position:relative;
right:640px;
bottom:765px;
}
#headerRight {
position:relative;
left:344px;
bottom:450px;
}
#twitter {
position:relative;
left:573px;
bottom:907px;
}
#facebook {
position:relative;
left:573px;
bottom:914px;
}
#leftMenu {
position:relative;
left:186px;
bottom:451px;
width:700px;
}
#rightMenu {
position:relative;
left:942px;
bottom:524px;
width:700px;
}
#leftFrame {
position:relative;
right:450px;
bottom:900px;
z-index:3;
width:800px;
height:2000px;
}
#rightFrame {
position:relative;
left:472px;
bottom:2900px;
z-index:4;
width:800px;
height:2000px;
}
#menuContainer {
position:relative;
right:600px;
}
#everything{
position:relative;
left:150px;
}
</style>
</head>
<body>
<div id="everything" align="center">
<div id="scissorsHeader" align="center"><img src="scissorsHeader.png"/></div>
<div id="headerLeft" align="center"><img src="headerLeft.png"/></div>
<div id="headerRight" align="center"><img src="headerRight.png"/></div>
<div id="menuContainer" align="center">
<div id="leftMenu" align="center">
<a href="news.html" target="leftFrame">
<img name="news" src="news.png"
onmouseover="document.news.src='newsRO.png'"
onmouseout="document.news.src='news.png'"/>
</a>
<a href="beats.html" target="leftFrame">
<img name="beats" src="beats.png"
onmouseover="document.beats.src='beatsRO.png'"
onmouseout="document.beats.src='beats.png'"/>
</a>
<a href="music.html" target="leftFrame">
<img name="music" src="music.png"
onmouseover="document.music.src='musicRO.png'"
onmouseout="document.music.src='music.png'"/>
</a>
</div>
<div id="rightMenu" align="center">
<a href="contact.html" target="rightFrame">
<img name="contact" src="contact.png"
onmouseover="document.contact.src='contactRO.png'"
onmouseout="document.contact.src='contact.png'"/>
</a>
<a href="links.html" target="rightFrame">
<img name="links" src="links.png"
onmouseover="document.links.src='linksRO.png'"
onmouseout="document.links.src='links.png'"/>
</a>
</div>
</div>
<div id="headerLeftLeft" align="center"><img src="scissorLeftLeftHeader.png"/></div>
<div id="facebook" align="center"><a href="http://www.facebook.com/scissormanmusic" target="_new"><img src="facebook.png"/></a></div>
<div id="twitter" align="center">
<a href="http://www.twitter.com/scissormanmusic" target="_new"><img src="twitterLogo.png"/></a></div>
<br /><br /><br /><br /><br />
<div align="center">
<iframe src="news.html" name="leftFrame" id="leftFrame" style="border:hidden" scrolling="no"></iframe>
</div>
<div align="center">
<iframe src="contact.html" name="rightFrame" id="rightFrame" style="border:hidden" scrolling="no"></iframe>
</div>
</div>
</body>
</html>
谢谢!
最佳答案
如果不提供固定定位，您可以尝试提供 margin 如果您坚持使用固定定位，那么您是否会尝试使用 media query 来检测视口(viewport)宽度，然后提供不同的 right 定位？
关于android - 网页左侧在 Android 手机上被截断，但在 Chrome、Safari 和 Firefox 上看起来不错，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10887679/