SQLの窓

2018年10月15日


CSS の @media screen と IFRAME を使用して PC コンテンツとスマホページを完全に別作成して切り替える

PC コンテンツとスマホページを純粋に CSS で切り替えるには、表示画面の設計がとても難しくなります。コンテンツ量が基本的には同量になるのを両立させるのは単純では無いと思います。

なので、本来のレスポンシブデザインでは無いですが、既存の PC ページへスマホページを追加する方法として、IFRAME を PC ページの中に展開するのが簡単です。

必要な HTML と CSS は以下のようなものになり、中身のサーバサイドの作成方法は昔ながらのリファレンスや、エージェント文字列で行います。

一番のポイントは、IFRAME をブラウザに fit させるのに必要な、html,body { height: 100%; } です。
<head>
<meta content="width=device-width initial-scale=1.0 minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" name="viewport">

<style>
html,body {
	height: 100%;
}
@media screen and ( min-width:480px ) {
	#container {
		display: block;
	}
	#ssub {
		display: none;
	}
}

@media screen and ( max-width:479px ) {

	#container {
		display: none;
	}
	#ssub {
		display: black;
		width: 100%;
		height: 100%;
	}

}
</style>
</head>
<body>
<div id="container">

<!-- ここに PC 用のコンテンツを表示する -->

</div>

<!-- ここに スマホ 用のコンテンツを表示する -->
<iframe id="ssub" src="スマホ専用ページ"></iframe>
<!-- スマホ専用ページはこのページより参照されない場合はこのページを展開する -->
<!-- ( このページとスマホ専用ページは同一 URL で作成 ) -->
</body>




【WEBブラウザの最新記事】
posted by lightbox at 2018-10-15 10:31 | WEBブラウザ | このブログの読者になる | 更新情報をチェックする
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり