縮放網站以適合手機屏幕
[英]Scaling Website to Fit Mobile Screens
問題描述
因此，我正在作為一個夏季項目在一個小型網站http://www.liftlists.com上工作 ，目的是更好地進行網頁設計和編程。 到目前為止，一切都在設計方面進展順利，但要在移動設備上安裝它卻遇到了很多麻煩-每次都會顯示完整的網站。 我已將.container更改為流暢的，將表更改為可響應的，但仍不適合移動頁面。 我正在使用Bootstrap，jQuery和一些Angular來運行該站點。
我在這里做錯了什么？ 我看過其他問題，但每個問題似乎都有一點不同，請先謝謝！
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, user-scalable=yes">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular-animate.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="liftscript.js"></script>
<script src="dropdown.js"></script>
<style>
body {
background-color: #516774;
}
.container-fluid{
width: 800px;
margin: 0 auto;
padding-top: 2cm;
}
.large-background {
background: url('big_background2.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.nav_heading {
background: #ededed;
color: #222;
margin: 0px;
text-align: center;
padding: 10px;
margin-bottom: 20px;
box-shadow:-1px 1px 1px rgba(0,0,0,0.15);
display: none;
}
.below_heading {
display: none;
}
ul.tabs{
margin: 0px;
padding: 0px;
list-style: none;
box-shadow:-1px 1px 1px rgba(0,0,0,0.15);
background: #ededed;
}
ul.tabs li:hover {
background-color: yellow;
}
ul.tabs li{
background: none;
color: #222;
display: inline-block;
padding: 10px 15px;
cursor: pointer;
}
ul.tabs li.active{
background: rgba(255,255,255,0.90);
color: #222;
}
.tab-content{
display: none;
background: #ededed;
padding: 5px;
box-shadow:-1px 1px 1px rgba(0,0,0,0.15);
margin-bottom:70px;
}
.tab-content.active{
display: inherit;
}
.info {
display: none;
background: #ededed;
padding: 15px;
box-shadow:-1px 1px 1px rgba(0,0,0,0.15);
}
#button-float {
float: right;
}
.float {
float: right;
}
#inside_nav_heading {
display: none;
background: #ededed;
color: #222;
margin: 0px;
text-align: center;
margin-bottom: 20px;
padding-top: 5px;
}
.footer {
position: fixed;
bottom: 0;
padding-top: 10px;
width: 100%;
height: 40px;
background-color: rgb(51, 51, 51);
color: white;
}
.ig-b- {
display: inline-block;
}
.ig-b- img {
visibility: hidden;
}
.ig-b-:hover {
background-position: 0 -60px;
}
.ig-b-:active {
background-position: 0 -120px;
}
.ig-b-24 {
width: 24px; height: 24px; background: url(http://badges.instagram.com/static/images/ig-badge-sprite-24.png) no-repeat 0 0;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
.ig-b-24 {
background-image: url(http://badges.instagram.com/static/images/ig-badge-sprite-24@2x.png); background-size: 60px 178px;
}
3 個解決方案
解決方案1
3 已采納 2015-06-06 16:08:48
如果將.container設置為固定寬度，它將無法適應。
更改此：
.container-fluid{
width: 800px;
margin: 0 auto;
padding-top: 2cm;
}
對此：
.container-fluid{
width: 100%;
max-width: 800px;
margin: 0 auto;
padding-top: 2cm;
}
並且它將適應屏幕，直到達到800px，然后再不擴展。
解決方案2
0 2015-06-06 16:21:40
我可以看到您正在使用twitter bootstrap框架進行前端設計，這非常容易。
只需嘗試使用引導程序列即可，它是針對設備響應設計而設計的。
在Bootstrap網站（ Bootstrap Grids ）上研究此部分
如果實施它，則您的網站將在所有設備上響應。 :)
解決方案3
0 2015-06-07 22:38:57
如果是受限制的寬度布局，您是否可以只使用帶前綴的.container類，而不要使用.container-fluid？
您如何使您的網站（僅 html 和 CSS）調整自身大小以適應移動設備或其他尺寸的屏幕？
[英]How do you make your website (only html and CSS) resize itself to fit mobile pones, or other sized screens?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.