2016-05-01 99 views
0

我只是做了一個網站的工作完美的電腦,但手機寬度不是100%在Android手機

.news { 
 
\t position:relative; 
 
\t width:100%; 
 
\t height:300px; 
 
\t background-color:rgba(255,255,255,0.8); 
 
\t top:550px; 
 
} 
 

 
.news-content { 
 
\t width:1000px; 
 
\t height:300px; 
 
\t margin:0 auto; 
 
} 
 

 
.news-content table { 
 
\t table-layout:fixed; 
 
\t width:100%; 
 
\t height:100%; 
 
\t 
 
} 
 

 
.news-content td { 
 
\t width:25%; 
 
\t max-width:25%; 
 
\t height:100%; 
 
\t text-align:center; 
 
\t white-space:pre-line; 
 
\t border-left:1px solid black; 
 
\t border-right:1px solid black; 
 
\t text-decoration:none; 
 
\t font-weight:bold; 
 
} 
 

 
.news-content h2 { 
 
\t margin:0; 
 
\t padding:0; 
 
} 
 

 
.news-content a { 
 
\t text-decoration:none; 
 
\t display:block; 
 
\t width:100%; 
 
\t height:100%; 
 
\t color:black; 
 
} 
 

 
.news-content a:hover { 
 
\t background-color:black; 
 
\t color:white; 
 
}

問題

enter image description here 它的圖片一個完美的菜單,100%,但他是固定的,其他我不能修復。頁腳和中間被切斷,我無法找出原因...

body { 
 
\t margin:0; 
 
\t padding:0; 
 
\t background-image:url("fundo.png"); 
 
\t background-attachment:fixed; 
 
\t background-size:100%; 
 
\t width:100%; 
 
\t height:1000px; 
 
\t overflow-x:hidden; 
 
} 
 

 
.menu { 
 
\t width:100%; 
 
\t height:80px; 
 
\t background-color:rgba(0,0,0,0.8); 
 
\t position:fixed; 
 
\t z-index:1000; 
 
} 
 

 
.menu-content { 
 
\t width:1000px; 
 
\t height:80px; 
 
\t margin:0 auto; 
 
\t text-align:center; \t 
 
} 
 

 
.menu ul { 
 
\t list-style:none; 
 
\t padding:0; 
 
\t margin:0; 
 
} 
 

 
.menu li { 
 
\t display:inline-block; 
 
\t vertical-align:middle; 
 
\t position:relative; 
 
\t margin:5px 5px 0 5px; 
 
} 
 

 
.menu a { 
 
\t text-decoration:none; 
 
\t color:white; 
 
\t display:block; 
 
\t font-size:20px; 
 
} 
 

 
.menu li ul { 
 
\t position:absolute; 
 
\t display:none; 
 
\t margin:0; 
 
\t padding:0; 
 
} 
 

 
.menu li ul li{ 
 
\t width:100%; 
 
\t width:150px; 
 
\t height:30px; 
 
\t margin:0px; 
 
\t background-color:black; 
 
} 
 

 
.menu li:hover ul { 
 
\t display:block; 
 
} 
 

 
.menu li:hover{ 
 
\t background-color:rgba(255,255,255,1); 
 
\t color:black; 
 
} 
 

 
.menu ul li:hover > a{ 
 
\t color:black; 
 
} 
 

 

 
.footer { 
 
\t position:relative; 
 
\t top:1000px; 
 
\t height:80px; 
 
\t width:100%; 
 
\t background-color:rgba(0,0,0,0.8); 
 
} 
 

 
.footer-content { 
 
\t width:1100px; 
 
\t height:80px; 
 
\t margin:0 auto; 
 
\t text-align:center; 
 
} 
 

 
.footer-content p { 
 
\t position:relative; 
 
\t text-decoration:none; 
 
\t color:white; 
 
\t opacity:0.4; 
 
\t font-family:Lucida Console; 
 
\t font-size:50px; 
 
\t margin:0; 
 
\t padding:0; 
 
\t top:20px; 
 
\t z-index:10; 
 
} 
 

 
.footer-content a { 
 
\t text-decoration:none; 
 
} 
 

 
.footer-content img { 
 
\t z-index:100; 
 
} 
 

 
.footer-content p:hover { 
 
\t opacity:1; 
 
}
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
 
<meta name="viewport" content="height:100%" /> 
 
<html> 
 
<head> 
 
<title>CCSOL | Sinta a Energia</title> 
 

 
<link rel="stylesheet" type="text/css" href="estilo.css"> 
 
<link rel="stylesheet" type="text/css" href="estilo-news.css"> 
 

 
</head> 
 
<body> 
 

 
\t <div class="menu"> 
 
\t 
 
\t \t <div class="menu-content"> 
 
\t \t \t 
 
\t \t \t <ul class="dropdown"> 
 
\t \t \t \t <li style="width:150px; height:30px;"><a href="empresa.html">A Empresa</a> 
 
\t \t \t \t \t <ul> 
 
\t \t \t \t \t \t <li><a href="quemsomos.html">Quem Somos</a></li> 
 
\t \t \t \t \t \t <li><a href="nossaresponsabilidade.html" style="font-size:14px;">Nossa Responsabilidade</a></li> 
 
\t \t \t \t \t </ul> 
 
\t \t \t \t </li> 
 
\t \t \t \t <li style="width:150px; height:30px;"><a href="ledsolar.html">LED Solar</a> 
 
\t \t \t \t \t <ul> 
 
\t \t \t \t \t \t <li><a href="8w.html">8W</a></li> 
 
\t \t \t \t \t \t <li><a href="12w.html">12W</a></li> 
 
\t \t \t \t \t \t <li><a href="15w.html">15W</a></li> 
 
\t \t \t \t \t \t <li><a href="18w.html">18W</a></li> 
 
\t \t \t \t \t \t <li><a href="20w.html">20W</a></li> 
 
\t \t \t \t \t \t <li><a href="25w.html">25W</a></li> 
 
\t \t \t \t \t \t <li><a href="30w.html">30W</a></li> 
 
\t \t \t \t \t \t <li><a href="40w.html">40W</a></li> 
 
\t \t \t \t \t \t <li><a href="50w.html">50W</a></li> 
 
\t \t \t \t \t \t <li><a href="60w.html">60W</a></li> 
 
\t \t \t \t \t \t <li><a href="70w.html">70W</a></li> 
 
\t \t \t \t \t \t <li><a href="80w.html">80W</a></li> 
 
\t \t \t \t \t </ul> 
 
\t \t \t \t </li> 
 
\t \t \t \t <li><a href="index.html"><img src="logo.png" alt="CCSOL" style="height:80%;" ></a></li> 
 
\t \t \t \t <li style="width:150px; height:30px;"><a href="fotovoltaico.html">Fotovoltaico</a> 
 
\t \t \t \t \t <ul> 
 
\t \t \t \t \t \t <li><a href="fvt.html">FVT</a></li> 
 
\t \t \t \t \t \t <li><a href="vidrovidro.html">Vidro - Vidro</a></li> 
 
\t \t \t \t \t \t <li><a href="fv.html">FV</a></li> 
 
\t \t \t \t \t </ul> 
 
\t \t \t \t </li> 
 
\t \t \t \t <li style="width:150px; height:30px;"><a href="contato.html">Contato</a></li> 
 
\t \t \t </ul> 
 

 
\t \t \t <a href="index.html"><img src="brasil.png" class="logo" alt="Português" style="position:absolute; top:10px; left:10px;"></a> 
 
\t \t \t <a href="indexen.html"><img src="usa.png" class="logo" alt="English" style="position:absolute; top:10px; left:35px;"></a> \t \t \t 
 

 
\t \t </div> 
 
\t </div> 
 
\t 
 
\t <div class="news"> 
 
\t \t <div class="news-content"> 
 
\t \t \t <table> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <td><a href="news1.html"> 
 
\t \t \t \t \t <h2>Noticia 1</h2> 
 
\t \t \t \t \t 
 
\t \t \t \t \t aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
 
\t \t \t \t \t aaaaaaaaaaaaaaaaaaaaaa 
 
\t \t \t \t \t asahsuahdsuadhaudhuofhoahiosajf 
 
\t \t \t \t \t ahudhasuishfuihdaiofhadoiadadsf 
 
\t \t \t \t \t fdfaffsdgsdfsfasdasf 
 
\t \t \t \t \t sdfdfasdfsadasfsdfdfadfas 
 
\t \t \t \t \t fddfafsafdfsdfasdfasfasfsdfdgas 
 
\t \t \t \t \t dsfafasdfdafasfadfdgs 
 
\t \t \t \t \t </a></td> 
 
\t \t \t \t \t <td><a href="news2.html"> 
 
\t \t \t \t \t <h2>Noticia 2</h2> 
 
\t \t \t \t \t 
 
\t \t \t \t \t </a></td> 
 
\t \t \t \t \t <td><a href="news3.html"> 
 
\t \t \t \t \t <h2>Noticia 3</h2> 
 
\t \t \t \t \t 
 
\t \t \t \t \t </a></td> 
 
\t \t \t \t \t <td><a href="news4.html"> 
 
\t \t \t \t \t <h2>Noticia 4</h2> 
 
\t \t \t \t \t 
 
\t \t \t \t \t </a></td> 
 
\t \t \t \t </tr> 
 
\t \t \t </table> 
 
\t \t </div> 
 
\t </div> 
 
\t 
 
\t <div class="footer"> 
 
\t \t <div class="footer-content"> 
 
\t \t <a href="https://www.facebook.com/ccsoltec/?fref=ts" target="_blank"><img src="face-icon.png" alt="Facebook CCSOL" style="position:relative; float:right; top:10px; right:200px; height:40px;"></a> 
 
\t \t <a href="index.html"><p>Sinta a Energia!</p></a> 
 
\t \t </div> 
 
\t </div> 
 
\t 
 
\t 
 
</body> 
 
</html>

我已經試圖把100vw,我已經試圖把 <meta name="viewport" content="width=device-width, initial-scale=1.0">但沒有工作要麼...

有是2個CSS,一個是消息,一個是我使用的所有具有菜單和頁腳的其他網頁...

有人可以幫我解決這件事情? ?其殺死我不明白爲什麼Android是欺負我......

+0

當你把「'? – mlegg

+0

你也有頁腳%'.footer {\t width:100%;}'但是頁腳內容爲px'.footer-content {\t width:1100px;'} – mlegg

+0

當我放置視口內容時它會變得更小,關於頁腳,我使用頁腳作爲圖像和頁腳內容作爲寫入空間,因爲我不希望寫入空間超過1100px。 –

回答

0

使用蓋做此響應的背景圖像

body { 
 
\t margin:0; 
 
\t padding:0; 
 
\t background: url(fundo.png) no-repeat center center fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
    overflow: hidden; 
 
}

+0

實際上後,把溢出x,它解決了幾乎所有的問題,只是一個問題,它在Windows Phone上的圖像有白色空間上下,只是stetic,你知道我怎麼能解決?非常感謝你給我的幫助XD –

+0

你的意思是背景封面圖片有白色的間距? – mlegg

+0

不,不,實際上我認爲功能封面不適用於wp mobile,它只是在網站中間的正常大小的圖像,沒有像電腦或android中的伸展或縮放,因此它的基本上是空白的如果你仍然不明白,讓我知道,我拍了一張照片,所以你可以看到它 –