スマホ用のWebサイトをPCで表示する場合は、一般的にCSSの@mediaで振り分けするのが一般的だが、max-widthの設定でもPCで表示が崩れにくいらしい。(スマホが無いのでよくわからん?)
こんな感じで使う。
すると600px以上に広がらなくなる。
<!DOCTYPE HTML> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>タイトル</title> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <style> *{ margin:0; padding:0; color:#00f; } .wrap{ max-width:600px; margin:auto; } .head{background-color:#3d3;} .main{background-color:#dfd;} .foot{background-color:#eee;} .p_head{font-size:32px;} /* 画像などはwidth:100%とする事 */ </style> </head> <html> <body> <div class="wrap"> <div class="head"> <p class="p_head">タイトル</p> </div> <div class="main"> <h1>H1H1H1H1H1H1H1H1</h1> <p>メイン、メイン、メイン、メイン、メイン、メイン、メイン、メイン、</p> <h2>H2H2H2H2H2H2</h2> <p>メイン、メイン、メイン、メイン、メイン、メイン、メイン、メイン、</p> <h2>H2H2H2H2H2H2</h2> <p>メイン、メイン、メイン、メイン、メイン、メイン、メイン、メイン、</p> <p>メイン、メイン、メイン、メイン、メイン、メイン、メイン、メイン、</p> </div> <div class="foot"> <p>(c) 2016 あちあち情報局</p> </div> </div> </body> </html>