PLAINERナレッジセンター
ログイン

PC専用のプロダクトのため、スマートフォンからデモが表示された場合は代替コンテンツを表示したい

自社サイト内に埋め込みコードを利用して表示している場合、CSSの仕組みを利用して、画面幅が狭いディスプレイ(スマートフォンなど)から閲覧した場合の代替コンテンツに切り替えることが可能です。

⚠️HTML/CSSの知識が必要です

概要

  • 画面幅が一定以上の時にデモを表示
  • 画面幅が一定以下の時に代替コンテンツ(デモへのリンクやテキスト、動画、画像など)を表示
  • 表示・非表示をCSSで切り替え

サンプルコード

HTML

画面幅が広い際に表示するデモ
※Plainerで生成する埋め込みコードの冒頭のdivタグにidを振ってください

<div id="plainer-demo" style="padding: 0; overflow: hidden; height: 80vh;"><iframe id="plainer-demo-iframe" style="border: none; width: 100%; height: 100%;" src="https://app.plainer.co.jp/demo/xxxx" scrolling="yes" sandbox="allow-scripts allow-same-origin"> </iframe></div>
<script>const iframe = document.getElementById('plainer-demo-iframe'); 
const parentUrlParams = window.location.search.substring(1); 
iframe.onload = function () { iframe.contentWindow.postMessage( { message: { url: document.URL, plainer_query: parentUrlParams }, }, '*' ); }; 
</script>

画面幅が狭い際に表示する内容
例：デモ画面へのPC用リンクとデモ画像

<div id="fallback-content">
  <a href="https://app.plainer.co.jp/demo/xxxx/" target="_blank">デモ画面を見る(PCのみ)
    <img src="https://xxx/xxx.jpeg" width="70%" />
  </a>
</div>

CSS

例：画面が1000px以上の場合はデモを表示、それ以下の場合はリンクと画像を表示

<style>
  @media screen and (max-width: 1000px){
  #plainer-demo {display:none}}
  @media screen and (min-width: 1000px){
  #fallback-content {display:none}}
</style>

このコードはサンプルです。ご自身の責任でご利用ください。動作は保証しておりませんのでご了承ください。

関連記事