CSS3 / JavaScriptで作るスマートフォンUIと落とし穴

  • View
    9.573

  • Download
    1

Embed Size (px)

DESCRIPTION

DeNA Creative Seminar vol.1でお話しした内容のスライドです。

Text of CSS3 / JavaScriptで作るスマートフォンUIと落とし穴

  • 1. DeNA Creative Seminar vol.1CSS3 / JavaScript UI

2. Web 3. http://blog.webcreativepark.net/ 4. HTML / CSSHTML5 / CSS3JavaScript / AjaxMovable Type / WordPress 5. UI ? 6. Appli or Web ? 7. 1. 2. 3. 8. 1. 9. MouseDown TouchStartMouseMove TouchMoveMouseUp TouchEnd 10. -webkit-transform:translate3d(100px,0,0); GPU 11. ? 12. Andorid3Dtransform 13. AndoridGPU 14. Andorid touchmove 15. $("ul").on("touchstart",function(e){! if(/Android/.test(navigator.userAgent)){! ! e.preventDefault();!}}):touchStart 16. Android3 17. e.preventdefault() 18. touchmove 19. 20. Android 21. 22. 2. 23. 2. 24. CSS ? 25. //set Full Screen without StatusBarvar ua = navigator.userAgent.toLowerCase();$.browser.android = /android/.test(ua);$.browser.iphone = /iphone/.test(ua);var portraitHeight,landscapeHeight;window.onload = function(){! $("html,body").height("1000px");! if($.browser.iphone){! ! $("body").css("position","relative");! }! setTimeout(function(){! ! scrollTo(1,0);! ! setTimeout(function(){! ! ! var height = window.innerHeight;! ! ! $("html,body").height(height+"px");! ! ! if(Math.abs(window.orientation)==0){! ! ! ! portraitHeight = height;! ! ! }else{! ! ! ! landscapeHeight = height;! ! ! }! ! ! setTimeout(loaded, 200);! ! },100);! }, 200);}; 26. $(window).bind("orientationchange",function(){! if(Math.abs(window.orientation)==0){! ! if(!portraitHeight)portraitHeight = window.innerHeight;! ! height = portraitHeight;! }else{! ! if(!landscapeHeight)landscapeHeight = window.innerHeight;! ! height = landscapeHeight;! }! $("html,body").height(height+"px");! setTimeout(function(){! ! scrollTo(1,0);! }, 200);}); 27. 3. 28. Andorid 29. $("a").not(".modalInner a")! .css("-webkit-tap-highlight-color",! ! ! ! ! ! ! ! ! ! ! ! !! ! ! ! ! "rgba(0,0,0,0)"); 30. Andorid UI 31. UIAndroid 32. Android 33. Thank you!!