スキップナビゲーションリンク

ワンソースマルチデバイス JavaScript 版

動作対象環境

動作サンプル

サンプルのみを別窓で表示

サンプルダウンロード

サンプルダウンロード

解説

ワンソース・マルチデバイスという概念に基づいて、PCとスマートフォンを対象に1ドキュメントを複数の異なるデザインで出力するようなWebサイトを設計、マークアップしました。

実装技術別に3タイプのサンプルソースをアップしました。

ワンソースマルチデバイス Media Query版

・ワンソースマルチデバイス JavaScript 版

ワンソースマルチデバイス PHP 版

本編「JavaScript 版」は、JavaScriptのuserAgentを利用し、たとえば「iOS と Android OS全般」 と「それ以外」のような条件分岐を行ってCSSの読み分けを実装する技術です。

var nUa=navigator.userAgent;
var nUaIPh=nUa.indexOf('iPhone; U; CPU iPhone ')!=-1;//iPhone
var nUaIPa=nUa.indexOf('iPad; U; CPU OS ')!=-1;//iPad
var nUaIPo=nUa.indexOf('iPod; U; CPU iPhone ')!=-1;//iPod
var nUaAnd=nUa.indexOf('Linux; U; Android ')!=-1;//Android
if(nUaIPh||nUaIPa||nUaIPo||nUaAnd){
 document.write('<meta name="format-detection" content="telephone=no">\n');
 document.write('<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=yes">\n');
 document.write('<link rel="stylesheet" type="text/css" href="[スマートフォンレイアウトCSS]" media="screen">\n');
}else{
 document.write('<link rel="stylesheet" type="text/css" href="[PCレイアウトCSS]" media="all">\n');
}

JavaScript依存であり、JavaScriptオフの環境でのデザイン再現性には限界があります。

関連情報