<meta http-equiv="Content-Type" content="text/html; charset=utf-8">\r
\r
<title>Logger</title>\r
- \r
+ <meta name="msapplication-tap-highlight" content="no">\r
<meta name="HandheldFriendly" content="true">\r
<meta name="mobileoptimized" content="0">\r
\r
\r
<!-- for smartphone -->\r
<meta name="format-detection" content="telephone=no">\r
- <meta name="apple-mobile-web-app-capable">\r
+ <meta name="apple-mobile-web-app-capable" content="yes">\r
\r
<!-- maximum-scale=1 初代iPod touch で必要, dynamic-viewport は operaで可能 -->\r
- <meta name="viewport" id="dynamic-viewport" content="width=device-width,target-densitydpi=device-dpi,initial-scale=1,user-scalable=0,maximum-scale=1">\r
+ <meta name="viewport" id="dynamic-viewport" content="width=device-width,target-densitydpi=device-dpi,initial-scale=1,user-scalable=0,maximum-scale=1,minimum-scale=1">\r
\r
<style>\r
+ html {\r
+ font-size : 100%; /* 1 */\r
+ -webkit-text-size-adjust : 100%; /* 2 */\r
+ -moz-text-size-adjust : 100%; /* 2 */\r
+ -ms-text-size-adjust : none; /* 2 */\r
+ text-size-adjust : 100%; /* 2 */\r
+ \r
+ touch-action : none;\r
+ -ms-touch-action : none;\r
+ touch-callout : none;\r
+ -webkit-touch-callout : none;\r
+ content-zooming : none;\r
+ -ms-content-zooming : none;\r
+ user-drag : none;\r
+ -khtml-user-drag : none;\r
+ -webkit-user-drag : none;\r
+ }\r
html, body {\r
- padding : 0;\r
- margin : 0;\r
- border : 0;\r
- width : 100%;\r
- height : 100%;\r
- overflow : hidden;\r
+ padding : 0;\r
+ margin : 0;\r
+ border : 0;\r
+ width : 100%;\r
+ height : 100%;\r
+ overflow : hidden;\r
+ background : #FF66FF;\r
}\r
iframe {\r
display : block;\r
padding : 0;\r
border : 0;\r
height : 100%;\r
- margin-left : 240px;\r
+ margin-left : 0;\r
+ background : #fff;\r
}\r
#log {\r
position : absolute;\r
- top : 0;\r
- left : 0;\r
+ top : 0%;\r
+ left : 0%;\r
width : 240px;\r
height : 100%;\r
font-size : 12px;\r
- z-index : 999;\r
+ z-index : 888;\r
color : #fff;\r
background : #000;\r
+ overflow : auto;\r
+ }\r
+ #toggle {\r
+ font-size : 2em;\r
+ font-family : Arial;\r
+ position : absolute;\r
+ top : 0;\r
+ left : 0;\r
+ width : 1em;\r
+ height : 1em;\r
+ line-height : 1;\r
+ color : #00f;\r
+ text-align : center;\r
+ font-weight : bold;\r
+ z-index : 999999;\r
+ cursor : pointer;\r
+ -webkit-tap-highlight-color : rgba(0,0,0,0);\r
}\r
+ .toggle_close #log,\r
+ .toggle_none #toggle {\r
+ display : none;\r
+ }\r
+ .toggle_none iframe {\r
+ margin-left : 240px;\r
+ }\r
+ \r
+/*--------------------------------------------------------------------------------------\r
+ * slide & zoom\r
+ */\r
+ .toggle_open_anime #log,\r
+ .toggle_close_anime #log,\r
+ .toggle_close_before #log, .toggle_open_before #log /* win safari3.2 */\r
+ {\r
+ -webkit-transition : 0.5s ease-in-out; /* win safari3.2 */\r
+ -webkit-transition : opacity 0.5s ease-in-out, left 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out, transform 0.5s ease-in-out; /* win safari4 delay は指定しない */\r
+\r
+ /* http://blog.webcreativepark.net/2012/10/19-161432.html */\r
+ -webkit-backface-visibility : hidden;\r
+ -moz-backface-visibility : hidden;\r
+ backface-visibility : hidden;\r
+ \r
+ transition : opacity 0.5s ease-in-out 0s, left 0.5s ease-in-out 0s, transform 0.5s ease-in-out 0s;\r
+ -o-transition : opacity 0.5s ease-in-out 0s, left 0.5s ease-in-out 0s, transform 0.5s ease-in-out 0s, -o-transform 0.5s ease-in-out 0s;\r
+ -ms-transition : opacity 0.5s ease-in-out 0s, left 0.5s ease-in-out 0s, transform 0.5s ease-in-out 0s, -ms-transform 0.5s ease-in-out 0s;\r
+ -moz-transition : opacity 0.5s ease-in-out 0s, left 0.5s ease-in-out 0s, transform 0.5s ease-in-out 0s, -moz-transform 0.5s ease-in-out 0s;\r
+ }\r
+\r
+/* slideIn */\r
+ .toggle_open_anime #log,\r
+ .toggle_open #log,\r
+ .toggle_close_before #log {\r
+ opacity : 1;\r
+ -webkit-transform : translate(0%,0); /* win safari3.2 */\r
+ -webkit-transform : translateX(0%) translateZ(0); /* safari4 */\r
+ -moz-transform : translateX(0%) translateZ(0);\r
+ -ms-transform : translateX(0%) translateZ(0);\r
+ -o-transform : translateX(0%) translateZ(0);\r
+ transform : translateX(0%) translateZ(0);\r
+ }\r
+ \r
+/* slideOut */\r
+ .toggle_close_anime #log,\r
+ .toggle_close #log,\r
+ .toggle_open_before #log {\r
+ opacity : 0;\r
+ -webkit-transform : translate(-10%,0); /* win safari3.2 */\r
+ -webkit-transform : translateX(-10%) translateZ(0); /* safari4 */\r
+ -moz-transform : translateX(-10%) translateZ(0);\r
+ -ms-transform : translateX(-10%) translateZ(0);\r
+ -o-transform : translateX(-10%) translateZ(0);\r
+ transform : translateX(-10%) translateZ(0);\r
+ }\r
</style>\r
\r
<script>\r
- function __onload(){\r
- if( document.all ){\r
- document.body.children[1].style.width = ( document.documentElement || document.body ).offsetWidth - 240 + 'px';\r
+ // css3 anime\r
+ // ff5+(-moz, 16+), ie10+, opera12+(-o, 12.5+), safari4+(-webkit, ?), iOS2+, Android2.1+\r
+ // http://lealog.hateblo.jp/entry/2013/03/06/234023\r
+ \r
+ // css3 transition\r
+ // ff4+(-moz, 16+), ie10+, opera11.6+(-o, 12.1+), safari3.0+(-webkit, ?), iOS(safari3.2+), Android2.1+\r
+ // https://developer.mozilla.org/ja/docs/Web/CSS/transition\r
+ \r
+ // css3 transform\r
+ // ff3.5+(-moz, 16+), ie9+(-ms, 10+), opera10.5+(-o, 12.1+), safari3.1+(-webkit, ?)\r
+ // https://developer.mozilla.org/ja/docs/Web/CSS/transform\r
+ \r
+ var EV_TRANS_END = document.getElementById && (function(){\r
+ var style = document.createElement( 'div' ).style;\r
+ return style[ 'transition' ] !== void 0 ? 'transitionend' :\r
+ style[ 'OTransition' ] !== void 0 ? 'otransitionend' :\r
+ style[ 'msTransition' ] !== void 0 ? 'msTransitionEnd' :// 'MSTransitionEnd' :\r
+ style[ 'MozTransition' ] !== void 0 ? 'transitionend' :\r
+ style[ 'webkitTransition' ] !== void 0 ? 'webkitTransitionEnd' : false;\r
+ })(),\r
+ USE_ANIME = !!EV_TRANS_END,\r
+ LOG_WIDTH = 240,\r
+ hasEvent = false,\r
+ toggleOpen = true,\r
+ toggleBusy = false;\r
+ \r
+ function __load(){\r
+ __resize();\r
+ setTimeout(function(){scrollTo(0, 1);}, 100);\r
+ if( window.addEventListener ){\r
+ window.addEventListener( 'orientationchange', function(){\r
+ setTimeout(function(){\r
+ //alert( window.innerWidth + 'x' + window.innerHeight );\r
+ __resize();\r
+ }, 100);\r
+ }, false\r
+ ); // iOS\r
+ };\r
+ };\r
+ function __resize( toggleChanged ){\r
+ var body = document.body,\r
+ log = body.children[0],\r
+ ifr = body.children[1],\r
+ btn = body.children[2],\r
+ viewW = document.all ? ( document.documentElement || body ).offsetWidth || window.innerWidth /* for ie9 */ : window.innerWidth,\r
+ viewH = window.innerHeight;\r
+\r
+ if( 800 <= viewW ){\r
+ ifr.style.width = viewW - LOG_WIDTH + 'px';\r
+ if( !document.all ){ \r
+ ifr.style.height = viewH + 'px'; // NetFront3.4\r
+ };\r
+ body.className = 'toggle_none';\r
} else {\r
- document.body.lastChild.style.width = ( window.innerWidth - 240 ) + 'px';\r
- document.body.lastChild.style.height = window.innerHeight + 'px'; // NetFront3.4\r
+ if( viewW < 240 ) log.style.width = viewW + 'px';\r
+ \r
+ ifr.style.width = viewW + 'px';\r
+ if( !document.all ){\r
+ ifr.style.height = viewH + 'px'; // NetFront3.4\r
+ };\r
+ if( USE_ANIME && toggleChanged ){\r
+ toggleBusy = true;\r
+ body.className = toggleOpen ? 'toggle_open_before' : 'toggle_close_before';\r
+ setTimeout( __readyTrans, 60 ); // 0 は不可\r
+ } else {\r
+ body.className = toggleOpen ? 'toggle_open' : 'toggle_close';\r
+ };\r
+ };\r
+ btn.innerHTML = toggleOpen ? '▶' : '▼';//►▸\r
+ };\r
+ function __readyTrans(){\r
+ var body = document.body,\r
+ log = body.children[0],\r
+ _class = body.className,\r
+ i = _class.indexOf( '_before' );\r
+ if( i !== -1 ){\r
+ hasEvent = true;\r
+ body.className = _class.substr( 0, i ) + '_anime';\r
+ \r
+ log.addEventListener( EV_TRANS_END, __onTrans, true );\r
+ log.style.cssText = toggleOpen ?\r
+ 'opacity:1;-webkit-transform:translate(0,0);' :\r
+ 'opacity:0;-webkit-transform:translate(-10%,0);'; /* win safari3.2 */\r
+ } else {\r
+ \r
+ };\r
+ };\r
+ function __onTrans(e){\r
+ var body = document.body,\r
+ log = body.children[0],\r
+ _class = body.className,\r
+ i = _class.indexOf( '_anime' );\r
+ if( i !== -1 ){\r
+ log.removeEventListener( EV_TRANS_END, __onTrans, true );\r
+ log.style.cssText = '';\r
+ body.className = _class.substr( 0, i );\r
+ toggleBusy = false;\r
+ } else {\r
+ \r
+ };\r
};\r
+ function __ontoggle(){\r
+ //if( toggleBusy ) return;\r
+ toggleOpen = !toggleOpen;\r
+ __resize( true );\r
};\r
</script>\r
<noscript>\r
<meta name="viewport" content="width=device-width,initial-scale=1">\r
</noscript>\r
</head>\r
-<body onload="__onload()" onresize="__onload()" scroll="no"><div id="log">-- console.log() --</div><iframe src="index.html" height="100%" scrolling="yes" frameborder="0"></body>\r
+<body onload="__load()" onresize="__resize()" scroll="no"><div id="log">-- console.log() --</div><iframe src="index.html" width="500" height="100%" scrolling="yes" frameborder="0" allowtransparency="no"></iframe><div id="toggle" onclick="__ontoggle();"></div></body>\r
</html>\r
<xmp class="cleanup-target" style="display:none"><plaintext style="display:none"><!-- plainetext は nds 用 -->
\ No newline at end of file
OSDN Git Service
