HTMLで構築されたPC専用サイト（いわゆる非レスポンシブ）を非レスポンシブのままWordpress化した時の話です。
そのサイトをスマホで見ると拡大されて表示されてしまう問題がありました。
スマホ画面をピンチすればサイト全体が表示されるので、情報が欠けているわけではないのですが、気持ち悪いので対応方法を調べたのでメモしておきます。
レスポンシブ対応のWordpressテンプレートにあるviewportの記述が悪さする
今どきのWordpressテーマはレスポンシブ対応していますので、header.phpにはviewportの記述があります。
多くのテーマで書かれている記述は以下のようなものです。
以下はSWELLのものです。
<meta name="viewport" content="width=device-width, viewport-fit=cover">以下はCocoonのものです。
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">この中で、問題となるのがcontent="width=device-widthの部分です。
width=device-width：これはビューポートの幅をデバイスの幅（スクリーンの幅）に合わせることを指定しています。この設定により、デバイスの幅に合わせた適切な表示が提供されます。
良さそうなものですが、非レスポンシブのサイトだと拡大されて画面からサイトがはみ出ます。
非レスポンシブサイトのviewportの記述は？
答えから言いますと、以下のように記述します。
<meta name="viewport" content="width=900, maximum-scale=1.0"> width=900の部分は、実際のサイトの幅を指定します。この例だと横幅900pxのサイトです。
maximum-scale=1.0を指定することで、読み込み時の拡大を防ぎます。
ユーザーのピンチ動作による拡大は出来ます。
maximum-scale=1.0を指定しない場合は、DPIの違いによって拡大されてしまうようです。
まとめ
非レスポンシブのサイトを新規に作ってサイトをスマホで確認した時に、いきなり拡大されてしまう問題が起きた時は、viewportの記述を確認してみてください。
