フレームワーク導入部と判別まで
導入
TOPページからのアクセスと限らない（すべてのページが開始点となる）ため
導入部は対象の全ページに記述すること！
修正
display:noneに変更（visibility:hiddenから）
導入部（htmlファイルのhead最下部に記述）
<!-- EFOLAB set --> <link rel="stylesheet" class = "EFOLABclass" href="EFOLAB/efolabBase.css"/> <meta name="viewport" content="width=device-width,user-scalable=no"/> <script src="EFOLAB/efolab_clubvino.js"></script> <!-- EFOLAB end -->
css
/* * スマートフォンの場合に新コンテナ再構築までの間、既存コンテンツを非表示にする。 * 非表示からの解除（bodyをdisplay:noneに)はjsファイルのメソッドの方で行う。 * [重要] ： このcssだけではスマートフォンでうまく動作しない時がある。（画面をズームされた時など） * 従って、viewportのセットを同時に行うこと！ */ @media screen and (max-width: 767px) { body { /* * スマートフォンサイズのときに既存コンテンツを非表示にするために設定。 * !importttant を設定しているので、同じbody要素にスタイル指定してあっても、こちらが優先される。 * 【注意点】明示的に（body要素ではなく）、id , class でbody要素にvisibility:visibleやdisplay:blockを * 指定されている場合、この指定は優先されず、有効にならない。 * その場合、こちらの設定も、同様にidかclassで指定すること！ */ display: none !important; /*background-color:yellow !important;*/ } }
efolab_clubvino.js
var EFOLAB; EFOLAB = ( function() {"use strict"; //スマートフォンと認識すべき最大幅:document.documentElement.clientWidthの値 var MAXWIDTH_SMARTPHONE = 767; //一緒にセットするスタイルシートのid var MYCLASS = "EFOLABclass"; /* * private */ //newしたPageインスタンスをpushして格納しておく配列 //この配列へのpushはアクセス開始時に必ず実行される。 var pages = []; pages.push("test"); //遷移ページと判断させるためのテスト //最初のページかどうかの判断として使うとき：値＝１が初回ページ。値＞１なら遷移ページ。 //デバイスの画面幅 var mClientWidth; //デバイスのピクセルレシオ var mDevicePixelRatio; /* * public method */ return { addPage : function(page) { pages.push(page); }, getPage : function() { return pages; }, mClassName : ( function() { return MYCLASS; }()), //初回アクセスかどうかを返す。trueなら初回アクセス。falseは遷移ページ。 isFirstAccess : function() { var bool = false; if (pages.length === 1) { bool = true; } return bool; }, //スマートフォンであればtrueを返す isSmartPhone : function() { var bool = false; mClientWidth = document.documentElement.clientWidth; mDevicePixelRatio = window.devicePixelRatio; if (mClientWidth <= MAXWIDTH_SMARTPHONE) { bool = true; } return bool; }, //operaminiかどうかを検査。operaminiならtrueを返す。 isOperamini : function() { var bool = false; if ( typeof operamini !== 'undefined') { if (operamini) { bool = true; } } return bool; }, /** * セットしたCSS(bodyを非表示にするもの)をmax-width:1pxをセットしてからremoveする * ー＞PCサイトで最初は767pxより大きな幅でアクセスした場合、後でサイズを変更して * 767px以下になった場合にセットしたcssが有効になり、bodyを非表示にしてしまうことを防ぐ。 */ clearMyCss : function() { var sheets = document.getElementsByTagName('link'); var i; for ( i = 0; i < sheets.length; i += 1) { var sheet = sheets[i]; //（注：document.styleSheetsで取得すると、要素へのmediaqueryのセットができない：読み取り専用のエラーになる） if (sheet.rel === "stylesheet" && sheet.className === EFOLAB.mClassName) { sheet.media = "(max-width:1px)"; //念のために1px指定してからremove document.head.removeChild(sheet); console.log("セットしてあったcssリンクのremove完了"); } } }, clearMyViewport : function() { var metas = document.getElementsByTagName('meta'); var i; for ( i = 0; i < metas.length; i += 1) { var meta = metas[i]; //（注：document.styleSheetsで取得すると、要素へのmediaqueryのセットができない：読み取り専用のエラーになる） if (meta.name === "viewport" && meta.className === EFOLAB.mClassName) { //remove document.head.removeChild(meta); console.log("セットしてあったmeta viewportのremove完了"); } } }, setBodyVisible : function() { document.body.setAttribute('style', 'display:block !important;'); //cssで!important指定しているので変更時も!important必要 } }; }()); EFOLAB.Page = function() {"use strict"; this.doc = null; //管利用の配列、EFOLAB.pagesに格納する EFOLAB.addPage(this); }; EFOLAB.Page.prototype.firstAccessSettingAndCheck = function() {"use strict"; console.log('firstAccessSettingAndCheck開始'); var bool = true; //戻り値 //スマートフォンかどうかの検査 //導入時にmata viewportをdocument.headにあらかじめセットしておくこと！(isSMartPhone判定でwidthを取得時に必要。) if (!EFOLAB.isSmartPhone()) {//スマートフォンでないとき console.log("pcからのアクセスと判定。"); EFOLAB.clearMyCss(); EFOLAB.clearMyViewport(); bool = false; } //operaminiかどうかの検査 if (EFOLAB.isOperamini()) {//operaminiであるとき console.log("operaminiからのアクセスと判定。"); EFOLAB.clearMyCss(); EFOLAB.clearMyViewport(); bool = false; } return bool; }; //いまのところ、未使用。 EFOLAB.Page.prototype.initSetting = function(doc) {"use strict"; this.doc = doc; }; /** *実行部 */ ( function() {"use strict"; var page = new EFOLAB.Page(); var boot; var createFirstPage; var createAjaxPage; boot = function() { //初回アクセスかどうか検査 if (EFOLAB.isFirstAccess()) { console.log('初回アクセスであると判定。'); if (page.firstAccessSettingAndCheck()) {//戻り値として、スマートフォン判定の結果を保持している。 //スマートフォンであると判定した場合。 console.log("スマートフォンであると判定したので、次のプログラムへ進む。"); createFirstPage(); } else { //スマートフォンではないと判定した場合。 //このプログラムの対象外なのでここで停止。 EFOLAB = null; //メモリ解放 console.log("プログラム対象外のため、EFOLABのメモリ解放し、プログラムを停止した。"); return false; } } else { console.log('初回アクセスでなく、遷移ページであると判定。'); createAjaxPage(); } }; createFirstPage = function() { console.log('初回アクセスページの生成開始'); //即、実行すべきプログラムはここに記述する //DOMが読み込まれてから実行するプログラムは以下に記述する if (document.body) { // } else { // document.addEventListener('DOMContentLoaded', test, false); } }; createAjaxPage = function() { console.log('遷移ページの生成を開始'); //即、実行すべきプログラムはここに記述する //DOMが読み込まれてから実行するプログラムは以下に記述する if (document.body) { // } else { // document.addEventListener('DOMContentLoaded', test, false); } }; if (document.head) { boot(); } else { document.head.addEventListener('load', boot, false); } }());
