This document discusses using UIWebView in iOS applications. It covers loading HTML and CSS content into UIWebView, handling touch events, supporting Retina displays, and using CSS effects like gradients, shadows, animations and rounded corners. It also provides resources for learning more about web development for iOS like the Safari Developer Center documentation.

1. UIWebView UI
IE
DOTAPON Software
@cocopon
http://dotapon.sakura.ne.jp

2. Calqum
(iPhone)
@cocopon
Osciroi
(Win, Mac)
:

3. Calqum2

4. ★ UIWebView
★ CSS
★ Calqum2…

5. — UIWebView
Interface Builder

6. Web

7. UI
Twitter tweet

8. CSS

9. Twitter G ail Apple Store Reeder

10. …

12. Safari on Mac / iOS Simulator
UIWebView
/ /
/ /
Retina /

13. Safari on Mac
iOS Simulator

14. Mac Safari
Mobile Safari
JavaScript

15. Web

16. iOS Simulator
HTML

17. > Safari >

18. JavaScript
console.log

19. Mac
Mac
JavaScript
Simulator
Simulator

20. UIWebView

21. UIWebView
- (void)loadRequest:(NSURLRequest *)request;
HTML
- (void)loadHTMLString:(NSString *)string
baseURL:(NSURL *)baseURL;

22. UIWebView
UIWebViewDelegate
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:
(NSURLRequest *)request navigationType:
(UIWebViewNavigationType)navigationType;

25. HTML …

26. viewport
<meta name="viewport"
content="initial-scale=1,user-scalable=no">
initial-scale
user-scalable

27. subview
PrivateAPI …
JavaScript (= )
<script type="text/javascript">
document.body.ontouchmove = function(evt) {
evt.preventDefault();
};
</script>

28. *{
-webkit-touch-callout: none;
-webkit-user-select: none;
}
-webkit-touch-callout
-webkit-user-select

29. Retina

30. box-shadow: (inset: )X Y ;
box-shadow: 0 1px 3px box-shadow: inset 0 0 5px
rgba(0, 0, 0, 0.5); rgba(0, 0, 0, 0.5);

31. text-shadow: X Y ;
text-shadow: 0 1px 0
text-shadow: 0 1px 0 #fff;
rgba(0, 0, 0, 0.5);

32. -webkit-gradient(linear, , , 1, 2, ...)
from ▸
color-stop(0.49) ▸
color-stop(0.50) ▸
to ▸
-webkit-gradient(linear, left top, left bottom,
from(#a9afbf),
color-stop(0.49, #6c768e),
color-stop(0.5, #444f6e),
to(#59637e))

33. -webkit-gradient(radial, , , , ,
1, 2, ...);
(50%, 30%) ▸ 300
-webkit-gradient(radial,
50% 30%, 0,
50% 30%, 300,
from(#777), to(#333));

34. Retina
/* */
.table-section .indicator {
background: url(indicator.png) no-repeat center left;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
/* Retina */
.table-section .indicator {
background-image: url(indicator@2x.png);
-webkit-background-size: 8px 12px;
}
}

36. @-webkit-keyframes
@-webkit-keyframes test {
0% {
-webkit-transform: translate(0, 0);
-webkit-transition-timing-function: ease-out;
}
50% {
-webkit-transform: translate(0, -50px) rotate(5deg);
-webkit-animation-timing-function: ease-in;
}
100% {
-webkit-transform: translate(0, 0);
}
}
-webkit-animation-name
#app-logo {
-webkit-animation-name: test;
-webkit-animation-delay: 10s;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: 1;
}

37. CSS (1)
• border-radius
• box-shadow
• text-shadow
• -webkit-gradient

38. CSS (2)
iOS
http://graphicpeel.com/cssiosicons

39. Safari Dev Center

40. Safari Dev Center
Safari Web Content Guide
Web
Safari HTML Reference
HTML
meta
Safari CSS Reference
CSS
Safari CSS Visual Effects Guide
http://developer.apple.com/devcenter/safari/index.action

41. UIWebView UI
DOTAPON Software
@cocopon
http://dotapon.sakura.ne.jp