1024pxの画面を、縮小し、小さなブラウザサイズに表示させたい

Question

viewport指定について

webサイトを製作しています。
pc向け1024pxにおける画面デザインをviewport指定で縮小し、
タブレットにも表示させようと思っています。

ただ、タブレット相当サイズの、PCブラウザには効きませんでした。
理想は、デバイスに問わず、サイズのみで判定し、1024pxの画面を縮小し表示させたいです。

何か方法はないでしょうか。また、そもそもタブレットのデザインをしない場合、
どうするのが一般的でしょうか。（横スクロールはできれば避けたいです）

よろしくお願いします。

Answer 1

すべての要素のサイズをvwで設定すれば、画面幅に応じて拡大/縮小します。

下記は、以前、ここの質問の回答用に作成したサンプルですが、参考になると思います。

Codepenサンプル

実際は特殊な場面でしか実用的ではないと思いますが。

---

jQueryでの実装例

$(window).on('load resize', function() {
  var winW = $(window).width();
  if (winW > 768 && winW < 1024) {
    $('body').css({transform:'scale(' + (winW/1024) + ')'});
  } else {
    $('body').css('transform', '')
  }
});

body {
  transform-origin: top left;
}

シンプルなHTMLでは動作確認しましたが、複雑なHTMLでうまくいくかは分かりません。

Comments

[annyakotta]

ご回答ありがとうございます。pxや%指定ではダメだということですよね。。
768px-1023pxの間にのみで、1024pxの画面を表示できればと思うのですが、そこだけvwにするのはちょっとおかしいですよね。。無知ですみません。

[hatena19]

メディアクエリを使えばできると思いますが。
回答のリンク先のサンプルでは、1000px以下ではvw、それ以上はpxで設定しています。

[annyakotta]

ありがとうございます。そうですね。
viewport指定のように、数行書いて適用できれば理想的なのですが、それは厳しそうですね。

[hatena19]

jQueryを使えば数行でできるかも。

[annyakotta]

jQuery数行でいけたら最高ですね
自分でも調べてみますが、もしヒントになりそうなこととかあれば、どうか教えてください????‍♀️

[hatena19]

回答にコード例を追記しましたのでご参考に。

[annyakotta]

ありがとうございます。トライしてみます。