ViewPortの設定について

  • 2018/5/29

タブレットでインターネットをする人がどんどん増えていっていますが、
いつもPCやスマホで見ていたサイトをタブレットで見たら表示がおかしい…ってことありませんか?

この記事ではタブレットでアクセスした時に表示をPCと同じにする設定について説明していきます。

そもそもなんでタブレットの表示がおかしくなるのかですが、いろんな要因があります。
・レスポンシブサイトだが、タブレットの幅に対応していない
・そもそもPCで見ることしか想定されていない 等々いろいろあります。
それを解決できる手段の一つとしてご紹介します。

UserAgentを用いてViewPortを切り替える。

閲覧する端末によってViewPortをJavaScriptで切り替えるというものです。 記述は以下のようになります。

UAでアクセスしている端末を判別して、headに書き込むViewPortの内容を変える処理です。

 

PCとスマホのレスポンシブを作るとき
あれ?タブレットは?ってなることが多いので、
特に注文がない場合はこれを入れて対応すればいいんじゃないかと思います。

 

是非ご活用ください。

 

この著者の最新の記事

ピックアップ記事

  1. アメーバブログからWordPressへ投稿記事を移行する機会がありましたので、それについてご紹介し…
  2. 今回で3回目のおすすめプラグインのご紹介です。 Classic Editor このプラ…
  3. WordPressで使えそうなプラグインのご紹介 その2ということで、またいくつか紹介したいと思い…
  4. WordPressでサイトを構築、改修するときに、標準の機能だけでは中々自分の思い描く通りにサイト…
  5. 皆さんはwordpressのテーマは何を使っているでしょうか?有料、無料ともにいろんなものが多く作ら…

株式会社タスタスHP

ページ上部へ戻る