スマホで画面ぴったりに表示させる設定について

現在、サイトの幅が640pxの指定がしてあります。
具体的には、CSSにmin-width640pxの指定が行われており、vewportには
<meta name="viewport" content="width=device-width, initial-scale=1">
と設定されています。

これらのサイトをスマホなど640px以下のデバイスで見るときにも、画面幅ぴったりに見れるようにしたいのですが、これはどの部分の定義を変更または追加することで実現できますでしょうか？

現在は一応手動で画面を縮小させると、画面幅ぴったりになるのですが、ページを更新したり、別ページへ遷移してしまうと、また640px幅で表示され、再度手動で縮小する必要があります。

この辺りを手動で調整しなくてもぴったりくるようにしたいです。
お詳しい方、アドバイスをよろしくお願いいたします。

質問者からの補足コメント

• initial-scale=1を外したら、自動で縮小表示されました。
  一度試していたのですが、キャッシュが残っていたのでしょうか？効果が確認できなかったので…。
  現在は、ページ遷移してもぴったりと表示されています。
  お騒がせして申し訳ありません。ありがとうございました。

    補足日時：2016/08/03 11:02

No.1 回答者： t_fumiaki 回答日時： 2016/08/03 10:27

CSSをレスポンシブ対応にする。

現在のCSSを見て見ないと何とも言えないが、概略は以下。
htmlの<meta name="viewport"は全ページに入れる。

cssは
min-width640px指定を止める。
CSSで横幅指定している部分は幅を%で指定する。
親要素に対する%、親要素が無い場合はブラウザの幅に対する%が適用される。

詳しいレスポンシブデザインのやり方は「レスポンシブ」で検索して下さい。

この回答へのお礼

ありがとうございます。
説明不足ですみません、一応現在はレスポンシブで対応しています。
ただ、リキッドレイアウトではないため640pxを基本値として作成していますが、640px以下で閲覧した場合に、全体的には640pxの構成を保ちつつ、480pxなどの小さい画面サイズに縮小？されてぴったりと表示させたいのです。
例えば、yahooとかのサイトPC版をスマホで見ると全体が縮小されて綺麗に表示されていますので、このイメージです。

お礼日時：2016/08/03 10:32