レスポンシブでないウェブサイトを縮小表示させる
CSSのメディアクエリも用いず、とにかくスマホやタブレットでPC版レイアウトのまま縮小表示したいとき。
header内に以下のビューポートのメタ情報を入れます。
<meta name="viewport" content="width=1100">
※widthの数値は任意で変更してください。
また、自分の場合、WPで構築しているサイトで上記を追記した時に、リッチテキストエディタから読み込んできたテキストのサイズがおかしなことになる現象が起きました。
読み込みの順番が影響しているのか？と、該当箇所を最後に読み込ませても変わらず。
以下を設定してあげることで解消。
html {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
normalize.cssを使っていれば上記の記述は入ってるみたいですが、いつも自作リセットを書いて運用していたので…
見直さなきゃなぁ。
