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ブラウザの最新記事】
- WEB ブラウザで WEBカメラから静止画像を canvas へ転送して、その画像をローカルへ保存するテンプレート
- WEB ブラウザで WEBカメラをテストするテンプレート / Android Chrome でテストすると【今は】カメラの front と back を切り替えできます
- iPhone を EpocCam というアプリで Wi-Fi の WEBカメラにする場合のいろいろ知っておく事。
- ブラウザ別『Java 無効』
- IE、Firefox、Chrome、Opera、Safari で JavaScript を無効にする
- ブラウザの入力履歴の削除( 特にパスワード )
- IE、Firefox、Chrome、Opera、Safari のキャッシュ削除のショートカット
- ブラウザを使用した簡易パーセントエンコーディング変換
- 各ブラウザで、onbeforeunload を使おうとすると
- ２０１４年７月７日現在。WEBフォントの実際
- IE の占める割合の変遷と IE8 でないと動かないシステムの現実
- Flash Playerに危険な脆弱性( またかというかこっちもか )。13.0.0.206 である事を確認しましょう。
- デベロッパーツールを使用してクッキーの一覧を表示する
- Seesaa ブログの『保存ボタンが表示されない』
- Firefox のみのレイアウトトラブル / float:left と line-height
- ブラウザ毎の「開発者ツール」の起動と知っておくべき要点
- ブラウザ別『ソース』の表示
- 各ブラウザの現在の「document.charset」と「document.characterSet」
- Favicon の動的変更・または追加( IE8、Firefox、Chrome、Opera、Safari )
- Opera の window.open のバグ
