viewポートでスマフォ対応？

Question

Wordpressへの組み込みで、テーマスイッチャープラグインでSPとPCのテーマの切り替えをしています。
（参考：http://blog.livedoor.jp/net_scope-diary/archives/19990863.html）

ここで社内では、SP版のコーディングについて横幅を640pxで構築し、metaのviewportで横幅を640px固定で設定しています。

これでどのデバイスでも640pxが画面幅？になり、ひとまず対応している状況ですが、私の感覚では
・コンテンツ内の全てのwidthを%指定
・フォントサイズをrem
・メディアクエリーでルート(html,body)の文字サイズを調整
したほうが、640pxで固定指定するよりも綺麗に出力されるかと思います。
％にすれば、CSSフレームワークのグリッドでコーディングしやすい面もありメリットあるかと思います。

一般的に、レスポンシブじゃないこういったケースはどうされているのでしょうか？

Answer 1

私もまだまだベストプラクティスを模索しつつなので、少しでも参考になれば程度の内容です。

PCとモバイルで出力されるHTML・読み込まれるCSSが別のものでしょうから、
CSSに関しては

• デバイスごと(メディアクエリごと)に固定幅のデザインにするのでなければ、基本的にwidthは%指定
• フォントサイズはrem指定 (念のため先にpxして置くほうが良いかも？)

※ htmlタグにfont-sizeを指定していて、メディアクエリをremで指定しているとSafariでメディアクエリの切替がhtml要素に指定されているfont-sizeの相対値になってしまう現象に遭遇したので、文字サイズはbodyで指定してあげたほうが良いかもしれません。(他に同現象に遭った！ってのを聴かないので、自分の環境依存なのか未検証なのですが...)

iPad3/4サイズの時はwidth: XXXXpx, iPhone6の時は〜のように、メディアクエリごとに最小widthを固定にするのであれば、対応するデバイス幅ごとのメディアクエリを設定して、それぞれmin-widthで最小値を指定してあげる方法もあります。
※ どのデバイス幅を基準にするかと横スクロールがいかに発生しないようにするかが少し大変ですが。

viewportの指定は、
ユーザーに拡大縮小を許可するのであれば、Bootstrapなどでも採用されている

<meta name="viewport" content="width=device-width, initial-scale=1">

html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
}

拡大縮小を許可しないアプリのような感じ？にしたければTwitterなどが採用している

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

縮小だけ禁止したいのであれば

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">

のような感じで指定してあげると良いと思います。

Getting started - BootstrapはGitHubやSassファイルもダウンロードできますので、これの、ベースとなるレイアウト部分とメディアクエリを指定しているCSSを参考にしてみるのが良いのではないでしょうか？

最近ではvw, vh という新しい単位での指定も出てきていますが、まだ挙動にばらつきがあるようなので、個人的には暫くは%・remメインの指定で良いのでは？と思っています。

[参考]
[CSS]ビューポート(vw, vh)とパーセント(%)、レスポンシブに適した単位の賢い使い分け方法 - コリス
Responsive htmlタグにfont-sizeを指定しているとremで指定したブレイクポイントがブラウザによって違うっぽい！？