我的网站在桌面上看起来很时髦，但在移动设备上看起来很糟糕，页面被推到左边，居中完全被破坏
这是我的代码
索引.php:
<!DOCTYPE html>
<!-- I know my codes messy -->
<!-- If you dont agree and want to -->
<!-- Hire me just need someone to speak to or think you can help -->
<!-- Shoot me a email: marley@marleyplant.com -->
<!-- Or you can tweet me: @MarleyJPlant -->
<html>
<head>
<meta name="description" content="MarleyJPlant Graphic Design Coding And Gaming" />
<meta name="keywords" content="Marley Joseph Plant, MarleyPlant, Marley Plant, Marley, Arduduck, Simon Hedley, YRS, Young Rewired, Rewired State, Young Rewired State, YRS 2015, Best In Design, MarleyJPlant, Young Rewired Winner" />
<meta name="author" content="metatags generator">
<meta name="robots" content="index, follow">
<meta name="revisit-after" content="1 days">
<link rel=”author” href=”https://plus.google.com/u/1/101486183104153864417/”/>
<title>Marley Joseph Plant</title>
<!-- Marley Plant, Marley Joseph Plant, MarleyJPlant -->
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://raw.githubusercontent.com/kswedberg/jquery-smooth-scroll/master/jquery.smooth-scroll.js">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/navigate.js"></script>
<script type="text/javascript" src="js/Icons.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
</head>
<body>
<div class="MainPart">
<div class="title">
<center><h1 class="title" >Marley Plant</h1></center>
</div>
<br />
<br />
<br />
<br />
<br />
<div class="social">
<center>
<a href="http://facebook.com/MarleyJPlant" alt="Facebook" class="fa fa-facebook fa-5x Icon"></a>
<a href="http://twitter.com/MarleyJPlant" alt="Twitter" class="fa fa-twitter fa-5x Icon"></a>
<a href="http://github.com/MarleyPlant" alt="Github" class="fa fa-github fa-5x Icon"></a>
<a href="http://blog.marleyplant.com" alt="WordPress" class="fa fa-wordpress fa-5x Icon"></a>
<a href="https://vine.co/u/1245502532772581376" alt="Vine" class="fa fa-vine fa-5x Icon"></a>
<a href="https://www.youtube.com/channel/UCDoR3fPDtLjqgR_9fNPt_mw" alt="youtube" class="fa fa-youtube-play fa-5x Icon"></a>
<a href="http://steamcommunity.com/id/Flaffle" alt="steam" class="fa fa-steam fa-5x Icon"></a>
<a href="https://www.flickr.com/photos/134060533@N05/" alt="Flickr" class="fa fa-flickr fa-5x Icon"></a>
<a href="http://instagram.com/marleyjplant/" alt="Instagram" class="fa fa-instagram fa-5x Icon"></a>
<a href="http://stackoverflow.com/users/5330908/marleyjplant?tab=profile" alt="Stack Overflow" class="fa fa-stack-overflow fa-5x Icon"></a>
</center>
</div>
</body>
</html>
main.css:
.title{
color: #5E6973;
font-family: universe;
text-align: center;
font-size: 125px;
}
.MainPart{
position: relative;
top: 50%;
transform: translateY(50%);
}
body{
background-image: url("/images/background.jpg");
}
::-webkit-scrollbar {
display: none;
}
.Icon{
text-decoration: none;
padding-right: 40px;
padding-bottom: 30px;
color: #7CFFC4;
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
overflow:hidden;
}
.Icon:hover{
-webkit-transform:scale(1.5,1.5);
-moz-transform:scale(1.5,1.5);
-o-transform:scale(1.5,1.5);
}
@font-face {
font-family: universe;
src: url('Universe.ttf');
}
.social{
align: center;
}
.jumbotron{
background-image: url("/images/background2.png");
}
您可以在 http://marleyplant.com 找到实时版本 我已经检查了我的 iphone 5 和我的 nokia lumia 920 的居中看起来一样
我正在使用这些库的:
Font Awesome 查询 Bootstrap
最佳答案
其次，您没有正确地垂直居中。
你需要让你的 .MainPart position: absolute 并将 transform: translateY(50%) 更改为 transform: translateY (-50%)。
这将带来水平居中问题，您需要添加 left: 50% 并将 translateY(-50%) 更改为 translate( -50%, -50%);
关于jquery - 网站不以手机为中心，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33697800/