Embed Size (px)
Citation preview
�� Web ������
1
— fixed
— ����— touch ��— ...
2
— iOS: Safari, Safari Webview (Webkit)
— Android: Chrome(Blink), Android Browser(Webkit)
3
— -webkit-line-clamp
— -webkit-min-device-pixel-ratio
— ES6
— ...
4
“WebKit is a rendering engine, not a browser.”
Peter-Paul Koch. “The Mobile Web Handbook”
5
— �# HTML+CSS+JS � webkit,)���*&���
— %�+(�+$'�!����#— webkit ��"������, � GPU ��� ������
— <input type='date' /> ����������
6
CSS
7
CSS
— viewport � position:fixed
— :hover � :active
— overflow
8
— ��� fixed ���— ���������fixed ������— fixed ����������— ...
9
10
����$(document).on('focus', 'input, textarea', function() { setTimeout(function() { window.scrollTo(document.body.scrollLeft, document.body.scrollTop); }, 0);});
11
body { margin: 0; padding: 0;}input { -webkit-appearance: none;}.bar { height: 50px; background: lightpink; position: fixed; bottom: 0; left: 0; right: 0;}
<body> <input type="text" placeholder="Input..." /> <div class="bar"></div></body>
window.addEventListener('resize', function() { console.log('resized')}, false)
12
13
— Android Chrome: resized!
— iOS 9 Safari: nothing
14
:hover :active
button { // ... &:active { opacity: .8; }}
<body ontouchstart=""> <button>Text</button></body>
15
overflow
overflow: scroll;-webkit-overflow-scrolling: touch;
16
����?��� ListView
17
— ����— ����iScrollSwipeView
18
Touch
— click 300ms
— swipe
19
click � mouseup�mousedown ����
20
tap � touchstart�touchend ���?
21
��
22
Android
— Developer -> USB debugging + chrome://inspect
— Webview ���������� �remote debugging
— �� Webview ��� http://blog.qqbrowser.cc/
23
iOS
— Settings->Safari->Advanced->Developer + Safari(Mac) Develop
— Xcode ���
24
��������
26
