tech

埋め込みモードでレスポンシブ時にレイアウトが崩れる現象を回避する方法

リザーブリンク広報担当

ChoiceRESERVEにはスマートフォン専用画面がありますが、レスポンシブサイトに埋め込んで運用する場合、ブラウザ幅がスマートフォンサイズになっても、自動的にスマートフォン専用画面への切り替えは行われません。これは<iframe>の仕様によるもので、場合によってはレイアウトの崩れが発生するケースがございます。この問題を回避する方法として、CSSのメディアクエリを利用し、width が一定の幅以下となった場合、<iframe>を消去し、予約画面へのリンクボタンを表示する運用方法をご案内いたします。

サンプル画面

デモ用のサンプル画面はこちらから

設定方法について

設定はとても簡単です。

STEP1リンクボタンを作成します。

予約画面へのリンクを指定したボタンを作成します。このボタンに display:none を指定することで、デフォルトでは非表示となるよう設定します。URLの末尾には必ず”?smp=1”をご指定下さい。このパラメータを指定することで、スマートフォン専用サイトを表示することができます。

<a id="reserve" href="https://{お客様のアカウント名}.resv.jp/?smp=1" target="_blank">予約画面はこちら</a>
#reserve{
   display:none;
}

STEP2メディアクエリを指定する

ブラウザ幅が一定のサイズ以下となった場合、iframeを消去し、STEP1で作成したリンクボタンが表示されるようメディアクエリを利用して以下のように記述します。

@media screen and (max-width: 768px)
 {
 iframe{
   display:none;
 }
 #reserve{
   display:block;
 }
}

0

0

このエントリーをはてなブックマークに追加

この記事を書いた人

リザーブリンク広報担当

リザーブリンク広報担当


Warning: Use of undefined constant description - assumed 'description' (this will throw an Error in a future version of PHP) in /home/reservelink/repo/yoyaku-package/public_html/blog/wp-content/themes/choichoi/single.php on line 311
「予約」をテーマに国内・国外問わず、あらゆるジャンルの情報を配信していきます。予約システムのご相談も承ります。お気軽にお問い合わせください。

この人が書いた記事

関連する記事

前の記事

埋め込みモードで画面が真っ白になる現象を回避する方法
ページトップへ