网站在手机中没有正确调整大小

问题描述：

因此，我正在完成一项任务，并且在桌面上全屏显示，看起来很好。然而，在移动设备中，页面背景的顶部没有向右延伸，中间部分没有居中，底部没有向右延伸。另外，当我在浏览器中缩小页面时，顶部三分之一的文本会被截断而不是缩放。我有点失落，希望得到某种指导。我是web应用程序的新手。我已经包含的代码，以及链接到页面，我的仓库OIF代码 https://profile-josh-adams.herokuapp.com/ https://github.com/ender554/profile 网站在手机中没有正确调整大小

HTML

<head> 
    <title>Josh Adams</title> 
    <%= csrf_meta_tags %> 

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> 
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> 
    </head> 

    <body> 

    <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse"> 
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation"> 
     <span class="navbar-toggler-icon"></span> 
     </button> 
     <div class="collapse navbar-collapse" id="navbarTogglerDemo01"> 
     <a class="navbar-brand" href="#index-page">Josh Adams</a> 
     <ul class="navbar-nav mr-auto mt-2 mt-lg-0"> 
      <li class="nav-item"> 
      <a class="nav-link" href="#index-page">Home</a> 
      </li> 
      <li class="nav-item"> 
      <a class="nav-link" href="#resume-page">Resume<span class="sr-only">(current)</span></a> 
      </li> 
      <li class="nav-item"> 
      <a class="nav-link" href="#links-page">Links</a> 
      </li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
      <li class="nav-item"> 
      <a class="nav-link" href="mailto:[email protected]">Contact</a> 
      </li> 
     </ul> 
     </div> 
    </nav> 
    <div class="index container-fluid" id="index-page"> 
    <div class="headline">About Me</div> 
    <hr> 

    <div class="media col-8 offset-2"> 
     <span class="media-left"> 
     <%= image_tag("profilephoto.jpg") %> 
     </span> 
     <div class="media-body"> 
     <h2 class="media-heading">Joshua Adams:</h2> 
     <hr class="title-rule"> 
     <h3 class="about-body"> 
     I am a 37 year old student with an extreme eagerness to learn, and be 
<br /><br />a key contributor in any profession. I love the academic setting and 
<br /><br />the skills it has helped me build, but I understand that in this field it is 
<br /><br /> most important to learn in a real world environment, and I hope to 
<br /><br />extend my abilities greatly. 
     </h3> 
     </div> 
    </div> 
    </div> 
    <div class="resume col-6 offset-3" id="resume-page"> 
    <h1 class="resume">Resume:</h1> 
    <div class="resume-itself"> 
     <%= image_tag("resume.jpg") %> 
    </div> 

    </div> 
    <div class="links" id="links-page"> 
    <h1 class="links-title">Links:</h1> 
    <div class="actual-links col-8 offset-2"> 
     <div class="row"> 
     <div class="col"> 
      <%= link_to image_tag("linkedin.png"), "https://www.linkedin.com/in/joshua-adams-061901b6/", :target => "_blank" %> 

     </div> 
     <div class="col"> 
      <%= image_tag("piazza.png") %> 
     </div> 
     <div class="col"> 
      <%= link_to image_tag("github.jpg"), "https://github.com/ender554", :target => "_blank" %> 
     </div> 
     </div> 
     <ul> 
     <li> 

     </li> 
     </ul> 
    </div> 
    </div> 
    </body> 
</html>

CSS

@import "bootstrap"; 

body { 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    min-width: 100%; 
    min-height: 100%; 
    background-position: center; 
} 

#index-page { 
    background: image_url('indexbackground.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    min-width: 100%; 
    min-height: 100%; 
} 


h1 { 
    color: white; 
} 

.media { 
    margin-top: 50px; 
} 



.headline { 
    font-size: 80pt; 
    text-align: center; 
    color: white; 
    margin-top: 50px; 
    font-family: 'chunkfiveroman'; 
} 

hr { 
    width: 75%; 
    color: black; 
    height: 2px; 
    background-color: white; 
    margin-top: 0px; 
    padding-top: 0px; 
} 

.title-rule { 
    width: 95%; 
    color: black; 
    height: 2px; 
    background-color: white; 
    margin-top: 0px; 
    padding-top: 0px; 
} 

.media-heading { 
    margin-left: 25px; 
    color: white; 

} 
.index { 
    padding-top: 50px; 
    height: 1000px; 
    width: 100%; 
} 

.about-body{ 
    margin-left: 20px; 
    color: white; 
} 

.resume { 
    margin-top: 20px; 
    text-align: center; 
    color: Black; 
    font-size: 50pt; 
    padding-top: 20px; 


} 
.navbar { 
    position: fixed; 
    top: 0; 
    width: 100%; 
    z-index:1; 
} 

.media-left img{ 
    border-radius: 5%; 
    border: solid white 2px; 
} 

.links { 
    margin-top: 20px; 
    text-align: center; 
    background-color: Black; 
    width: 100%; 
    font-size: 50pt; 
    height: 1000px; 
    padding-top: 50px; 
} 

.links-title { 
    margin-bottom: 80px; 
    font-size: 80pt; 
    padding-top: -10px; 
}

答

你需要添加这两在你的头标签行，这将修复你的响应问题

<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1">

最后一行是为响应目的

你有一个更多的CSS问题，你的形象太大

应用下面的CSS，它会带它

.resume-itself img{ 
    max-width: 100%; 
}

中央部分工作，但顶部和底部部分都变得更小，顶部的话不再可见 – ender554

答

使用适当类的护理提供的引导程序。您正在使用自举类以错误的方式

使用此链接，了解更多关于自举 bootstrap 3 tutorial

答

您可能需要添加下列行内元素。

<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1">

Ex - 。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Example</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
</head>

网站在手机中没有正确调整大小

相关推荐