2017-04-09 13 views
0

私は200pxの固定サイズのウェブページを持ち、私の電話で全画面を表示したいと思っています。 は、だから私は、研究のビットを行なったし、HTMLヘッダーにメタマークアップを使用:携帯電話のページサイズを固定

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

私も200pxのにボディマークアップサイズを修正(およびオーバーフローを非表示)するには、「モバイル」CSSファイルを作っ:

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

これで私は必要なものを手に入れましたが、なぜならページ幅が200pxを超えているからです。私はこれを確認するために200pxの固定のでセンタリングテキストとサンプルテーブルを追加し、これが得た:

mobile page

これで何が悪いのでしょうか?

完全なソース、 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> 

EDIT:で削除空白ページの下のスクリーンショット、フルソースを追加

答えて

0

新しい問題が発生したため、ページを下にスクロールできませんでした。だから私はCSSのオーバーフロー:隠しプロパティを削除し、両方の問題を修正しました。 しかし、私はまだそれを得ることはできません。

関連する問題