在手機屏幕上固定頁面大小

我想要一個固定大小爲200px的網頁，並在手機上顯示全屏。所以我做了一些研究和使用HTML頭的元標記：在手機屏幕上固定頁面大小

<meta name="viewport" content="with=device-width, user-scalable=yes, initial-scale=1.0"/>

我也做了一個「移動」的css文件來修復體內標記大小爲200px（和隱藏溢出）：

body 
{ 
    width: 200px; 
    overflow: hidden; 
}

有了這個，我得到了我需要的東西，但出於某種原因，我沒有看到頁面寬度仍然超過200px。我添加了一個居中的文本和樣表有固定的200至驗證這一點，並得到了這一點：

這有什麼錯呢？

完整源， mobile.css：

body 
{ 
    width: 200px; 
    overflow: hidden; 
}

的main.css

#container 
{ 
    width: 200px; 
    margin: 0 auto; 
    text-align: center; 
} 

table 
{ 
    border: 1px solid black; 
    table-layout: fixed; 
    width: 200px; 
} 

th, td 
{ 
    border: 1px solid black; 
    width: 100px; 
}

page.php文件（輸出HTML）

<!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" /> 
     <meta name="viewport" content="with=device-width, user-scalable=yes, initial-scale=1.0"/> 
     <link rel="stylesheet" type="text/css" href="CSS/main.css"> 
     <link rel="stylesheet" type="text/css" href="CSS/mobile.css"> 
     <title>myTitle</title> 
    </head> 
    <body> 
     <div id="container"> 
      Sur mobile :) 
      <table> 
       <tr> 
        <th>Col1</th> 
        <th>Col2</th> 
       </tr> 
      </table> 
     </div> 
    </body> 
</html>

編輯：在被移除的空白在頁面下方截圖，添加完整源代碼

來源

2017-04-09 axiagame

出現新問題，我無法向下滾動頁面。所以我刪除了CSS中的overflow：hidden屬性，它解決了這兩個問題。然而，我仍然不明白爲什麼。

來源

2017-05-02 13:46:34 axiagame

在手機屏幕上固定頁面大小

回答

相關問題