PC向けに作ったサイトをスマホやタブレットでそのまま表示したい

Question

viewportの設定方法について、色々と解説を見て実験してみたのですが、いまいち結論がはっきりしないため教えてください。

PC向けに作った横幅固定のWebサイトを、AndroidでもiOSでも同じように、スマホやタブレットでそのまま丸ごとギュッと縮小した形で表示するにはどのようなviewportが適切なのでしょうか？

いくつか方法が思いつくのですが、

まず、

1：viewportを設定しない
→これは、コンテンツエリアの幅によっては左右に余白ができたりすることがあるので、希望する表示になりません。

2：width=固定値を設定する

<meta name="viewport" content="width=980">

→これは、確かに丸ごと縮小してぴったり表示できるんですが、iOSとAndroidではフォントサイズが異なってしまいます。

3：width=device-widthを設定する

<meta name="viewport" content="width=device-width">

→これは、丸ごと縮小してぴったり表示で、フォントサイズも同じになりました。

以上の結果から3が正解なのだろうかと思ったのですが、この設定がされているのに、iPadから見るとランドスケープ表示時に横にはみ出ているサイトがありました。（Chrome開発者ツールとxcodeで確認）

はみ出てるサイト例）
http://www.miguide.jp/japansenses/20151028/
http://afro-fukuoka.net/

これは上記のサイトが特殊（コンテンツエリア内に何か問題があるとか）なだけで、通常は3の対応方法で問題ないものなのでしょうか？

お分かりになる方ぜひ教えてください。

###補足
取り急ぎ2でフォントサイズをiOSとAndroidで同じにする方法が分かりましたので補足します。

http://stackoverflow.com/questions/11289166/chrome-on-android-resizes-font
こちらに解決方法があり、Chromeのバグ？のようです。
max-height: 999999px;をサイズがおかしい要素に追加すると直りました。
ただ、これを毎回適用するのはちょっと現実的ではないし、全称セレクタもできれば使いたくないなと...。
できればもっと良い解決方法が知りたいです。

また、結局2と3どちらを選択すべきなのか、3ではなぜ一部のサイトがはみ出してしまっているのかについてはまだ分からないままですので、引き続き回答をお願いいたします。

Answer 1

2でフォントを自動調整しないcssを記述するのが正解だと思います？

3ではうまくいかないと思います。

Comments

[mx3]

例えばdtとddで文字サイズが違うなど、明らかに挙動がおかしいので、やはり、テキストの自動調整をストップさせたいと思って引き続き調べたところ解決しましたので、後ほど補足したいと思います。

ちなみに、3ではうまくいかないのはなぜでしょうか？ぜひ理由を教えて下さい。
今回うまくいったのはたまたまなのでしょうか？？
一部のサイトが3の方法でなぜはみ出ているのか、もしお分かりでしたらぜひ教えて頂けると嬉しいです。

[matometaru]

解決してよかったです。

device-widthはデバイスによって異なります。
iPhone5sは320px、iPadiは1037pxです。
なので、3の指定で980pxの固定幅のサイトをiPhone5Sでみると320pxしか表示されず途切れて表示されます。逆にiPadiは少し余白ができるはずです。

今回うまくいったのはたまたまというより勘違いの可能性が高いです。

なぜはみだしているかの理由ですが、
iPadではみだしているのは、iPadを想定して作られいないからです。
（iPadでみたとき、中のブロック幅が1200pxあるのに対してdevice-widthは1037pxですから、当然はみだします。）

よくわからなかった場合は、
「レスポンシブサイト」や「リキッドデザイン」等のワードで調べてみてください。

Answer 2

body { -webkit-text-size-adjust:none; }

はどうでしょうか？

Comments

[mx3]

一番はじめにこれを試しましたがダメでした。ただ、フォントサイズが異なる件については、Chromeのバグということで自己解決済みで、質問文に補足として詳細を入れています。

Answer 3

なるほど。お役に立てずすみません。ちなみにわたしは1の設定なしでやってます。cssでユニバーサルセレクタでmargin.paddingをリセット、widthとfont-sizeを設定。今の所これでスマホもタブレットも表示に問題ないです。コンテンツによっては参考にならないかも知れませんね。あまり良い解決法が提示できずすみません。

Comments

[mx3]

いえいえ、ありがとうございます！1でも問題ないケースも多いんですね。

Answer 4

2で、
cssに
helm,body｛
width: 100%;
｝
を追加でどうでしょうか。

Comments

[mx3]

残念ながら改善できませんでした。フォントサイズは異なったままです。

Answer 5

はじめまして、
２に関してだけの回答を簡単ですが。…
リセットCSSを適用してみてはいかがでしょう？

ANDROIDに関しては、メーカー独自にフォントがインストールしてある可能性もあるので、
機種ごとに異なる可能性がある。との事なので、リセットCSSもカスタムしてみてください。

簡単ですが、よろしくお願いいたします。

Comments

[mx3]

普段はnormalize.cssを使用しています。試しにHTML5 Doctor Reset Stylesheetを適用してみたのですが、改善ありませんでした。