ヤビブロ

  • ホーム
  • ブログ
  • お問い合わせ

ヤビブロ

  • ホーム
  • ブログ
  • お問い合わせ

【レスポンシブ】pcの画面レイアウトをタブレットでも表示する方法

2016年11月8日
icon_pc_sp_tablet

pc、sp、タブレット表示を、すべてレスポンシブでコーディングする際にviewportを下記のように指定していたが、タイトルにもあるように、pcの画面レイアウトをタブレットでも表示したい場合には表示が上手くいきません。

1
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />

結論をいうと、viewportの指定を次のように書くとタブレット画面でもPCのレイアウトが表示できます。

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

これで、タブレットでもPCレイアウトを表示できるのだが、今一度、レスポンシブに関する属性と値についてみていきましょう。

レスポンシブ時のhtml宣言について

meta name=”viewport”ビューポート、表示領域。

content=”width=device-width”直訳すると「幅はデバイスの幅」ということ。表示している端末、ブラウザの幅になる。

content=”initial-scale=1.0″初期表示の拡大率。
上記の1.0は、端末、ブラウザの幅に関係なくcssで指定した幅で表示。

content=”user-scalable=no”スマホ、タブレットでの表示時に指で拡大縮小(ピンチイン・ピンチアウト)ができないようにする。
拡大縮小できるようにするには、”user-scalable=yes”にするとよい。

上記のように、
レスポンシブでコーディングする際には、name属性にはviewportのみでよいが、content属性にいくつか指定できる値が出てきます。
そして、今回initial-scale=1.0を外したことで、pcの画面をタブレットでも表示することが可能になりました。

スポンサードサーチ

まとめ

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

冒頭で、上のように書きましたが、今回の目的であるpcの画面レイアウトをタブレットでも表示するのには、普段レスポンシブの際に書いているinitial-scale=1.0が不必要だったということです。
initial-scale=1.0を指定することで、端末、ブラウザの幅に関係なくcssで指定した幅で表示されるので、pcサイズで指定しているwidth通りに表示されていたということになるようです。

もしかしたら、他にもっと適切な方法があるかもしれませんが、ひとまずこれでpcの画面レイアウトをタブレットでも表示することができます!

関連記事

  • コピペでOK!『別タブ』ではなく、『別ウィンドウ』でリンクを開く方法2018年8月31日 コピペでOK!『別タブ』ではなく、『別ウィンドウ』でリンクを開く方法
  • 【html】iPhoneで数字が勝手に電話のリンクになっている!?そんな時の解決法2017年11月12日 【html】iPhoneで数字が勝手に電話のリンクになっている!?そんな時の解決法
  • 【jQuery】scrollme.jsプラグインが動作しない!?jQueryのバージョンが原因だった!2017年11月2日 【jQuery】scrollme.jsプラグインが動作しない!?jQueryのバージョンが原因だった!
  • 【js】サイトに埋め込んだYouTubeの一時停止ボタンをiframe外で制御する方法2017年11月30日 【js】サイトに埋め込んだYouTubeの一時停止ボタンをiframe外で制御する方法
  • Uncaught Error: Syntax error, unrecognized expression: a[href^=#]エラーの解決方法!2017年11月3日 Uncaught Error: Syntax error, unrecognized expression: a[href^=#]エラーの解決方法!

スポンサードリンク

  • 最近の投稿

    • 【基礎】Vue.jsの『コンポーネント』とは?【基礎】Vue.jsの『コンポーネント』とは?2019年6月25日
    • 【Yarn + Vue CLI】を使って簡単にVue.jsの環境構築をする方法【Yarn + Vue CLI】を使って簡単にVue.jsの環境構築をする方法2019年6月17日
    • コピペでOK!Vue.jsで『ハンバーガーメニュー』を実装する方法コピペでOK!Vue.jsで『ハンバーガーメニュー』を実装する方法2019年3月8日
    • 【Mac】vscodeの拡張機能を一括インストールする方法【Mac】vscodeの拡張機能を一括インストールする方法2019年3月8日
    • js不要!cssのみで『無限ループスライダー』を作成する方法js不要!cssのみで『無限ループスライダー』を作成する方法2019年2月24日
    • jQuery・vue.js不要!javascriptで複数対応のアコーディオンを作成する方法jQuery・vue.js不要!javascriptで複数対応のアコーディオンを作成する方法2019年1月30日
    • 【git】新規作成、複製したファイルがsourcetree上で反映されない!?そんな時の解決法【git】新規作成、複製したファイルがsourcetree上で反映されない!?そんな時の解決法2019年1月30日
    • 【css】文字(テキスト)にborderをつけるように縁取りをする方法【css】文字(テキスト)にborderをつけるように縁取りをする方法2019年1月30日
  • カテゴリー

    • AMP (2)
    • android (1)
    • atom (2)
    • css (25)
    • facebook (1)
    • font (1)
    • form (1)
    • FTP (1)
    • git (3)
    • gulp (3)
    • html (2)
    • IE (1)
    • instagram (1)
    • iphone (3)
    • jquery (13)
    • js (5)
    • Mac (10)
    • Photoshop (5)
    • SourceTree (5)
    • Subversion (1)
    • twitter (1)
    • Vue.js (3)
    • Webフォント (1)
    • windows (2)
    • WordPress (7)
    • お知らせ (1)
    • サクラエディタ (1)
    • セキュリティ (1)
    • パララックス (1)
    • 便利ツール (6)
    • 差分チェック (1)
    • 日記 (4)
  • アーカイブ

  • タグ

    android atom background-image before break-all clcl clipmail counter-increment cssハック facebook git github html IE11 instagram iphone ipアドレス linear-gradient Math.random mCustomScrollbar Noto Sans Japanese select snapwidget SourceTree table tool transform transition twitter url改行 windows word-break お問い合わせ コピペ サクラエディタ スクロールバー タスクバー テキストエディタ パッケージ フォーム プラグイン 埋め込み 擬似クラス 改行コード 純正ボタン

    Copyright © 2016 ヤビブロ All Rights Reserved.