<meta name="apple-mobile-web-app-capable">\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
* 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 __resize( toggleChanged ){\r
var body = document.body,\r
log = body.children[0],\r
ifr = body.children[1],\r
ifr.style.width = viewW + 'px';\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
};\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
-</html>\r
-<xmp class="cleanup-target" style="display:none"><plaintext style="display:none"><!-- plainetext は nds 用 -->
\ No newline at end of file
+<body onload="__resize()" onresize="__resize()" scroll="no"><div id="log">-- console.log() --</div><iframe src="index.html" width="500" height="100%" scrolling="yes" frameborder="0"></iframe><div id="toggle" onclick="__ontoggle();"></div></body>\r
+</html>
\ No newline at end of file
OSDN Git Service
