\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
border : 0;\r
height : 100%;\r
margin-left : 0;\r
+ background : #fff;\r
}\r
#log {\r
position : absolute;\r
overflow : auto;\r
}\r
#toggle {\r
- font-size : 1.5em;\r
+ font-size : 2em;\r
font-family : Arial;\r
position : absolute;\r
top : 0;\r
color : #00f;\r
text-align : center;\r
font-weight : bold;\r
- z-index : 999;\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
* slide & zoom\r
*/\r
.toggle_open_anime #log,\r
- .toggle_close_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
- transform : translateZ(0);\r
- \r
- transition-property : opacity, left, transform;\r
- -o-transition-property : opacity, left, transform;\r
- -ms-transition-property : opacity, left, transform;\r
- -moz-transition-property : opacity, left, transform;\r
- -webkit-transition-property : opacity, left, transform;\r
- \r
- transition-duration : 0.5s;\r
- -o-transition-duration : 0.5s;\r
- -ms-transition-duration : 0.5s;\r
- -moz-transition-duration : 0.5s;\r
- -webkit-transition-duration : 0.5s;\r
- \r
- transition-timing-function : ease-in-out;\r
- -o-transition-timing-function : ease-in-out;\r
- -ms-transition-timing-function : ease-in-out;\r
- -moz-transition-timing-function : ease-in-out;\r
- -webkit-transition-timing-function : ease-in-out;\r
- \r
- transition-delay : 0s;\r
- -o-transition-delay : 0s;\r
- -ms-transition-delay : 0s;\r
- -moz-transition-delay : 0s;\r
- -webkit-transition-delay : 0s;\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; left : 0%;/* for iOS3 */\r
- /*transform : translateX(0%);*/\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; left : -5%;/* for iOS3 */\r
- /*transform : translateX(-5%);*/\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
// http://lealog.hateblo.jp/entry/2013/03/06/234023\r
\r
// css3 transition\r
- // ff4+(-moz, 16+), ie10+, opera11.6+(-o, 12.1+), safari3+(-webkit, ?), iOS(safari3.2+), Android2.1+\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+()\r
-\r
- var EV_TRANS_END = (function(){\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 document.documentMode <= 9 ? false : // ie9\r
- style[ 'transform' ] !== void 0 ? 'transitionend' :\r
- style[ 'OTransform' ] !== void 0 ? 'otransitionend' :\r
- style[ 'msTransform' ] !== void 0 ? 'msTransitionEnd' : // 'MSTransitionEnd' :\r
- style[ 'MozTransform' ] !== void 0 ? 'transitionend' :\r
- style[ 'webkitTransform' ] !== void 0 ? 'webkitTransitionEnd' : false;\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 __resize(){\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
- if( document.all ){\r
- ifr.style.width = viewW - LOG_WIDTH + 'px';\r
- } else {\r
- ifr.style.width = viewW - LOG_WIDTH + 'px';\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
if( viewW < 240 ) log.style.width = viewW + 'px';\r
\r
- if( document.all ){\r
- ifr.style.width = viewW + 'px';\r
- } else {\r
- ifr.style.width = viewW + 'px';\r
+ ifr.style.width = viewW + 'px';\r
+ if( !document.all ){\r
ifr.style.height = viewH + 'px'; // NetFront3.4\r
};\r
- if( USE_ANIME ){\r
+ if( USE_ANIME && toggleChanged ){\r
toggleBusy = true;\r
body.className = toggleOpen ? 'toggle_open_before' : 'toggle_close_before';\r
- setTimeout( __readyTrans, 16 );\r
+ setTimeout( __readyTrans, 60 ); // 0 は不可\r
} else {\r
body.className = toggleOpen ? 'toggle_open' : 'toggle_close';\r
};\r
};\r
- btn.innerHTML = toggleOpen ? '►' : '▼';\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
- log.addEventListener( EV_TRANS_END, __onTrans, true );\r
- hasEvent = true;\r
- body.className = _class.substr( 0, i ) + '_anime';\r
- } else {\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
- };\r
- function __onTrans(e){\r
- console.log( 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
- body.className = _class.substr( 0, i );\r
- toggleBusy = false;\r
- } else {\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
- };\r
function __ontoggle(){\r
//if( toggleBusy ) return;\r
toggleOpen = !toggleOpen;\r
- __resize();\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="__
resize()" onresize="__resize()" scroll="no"><div id="log">-- console.log() --</div><iframe src="mini.html" width="500" height="100%" scrolling="yes" frameborder="0"></iframe><div id="toggle" onclick="__ontoggle();"></div></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
