移¨ç«¯ Web ¼€‘€œ¯¤µ

  • View
    107

  • Download
    2

Embed Size (px)

Text of 移¨ç«¯ Web...

  • 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

    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;}

    window.addEventListener('resize', function() { console.log('resized')}, false)

    12

  • 13

  • Android Chrome: resized!

    iOS 9 Safari: nothing

    14

  • :hover :active

    button { // ... &:active { opacity: .8; }}

    Text

    15

  • overflow

    overflow: scroll;-webkit-overflow-scrolling: touch;

    16

  • ?

    ListView

    17

  • iScrollSwipeView

    18

    http://cubiq.org/dropbox/iscroll4/examples/pull-to-refresh/https://github.com/cubiq/SwipeView

  • 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

    https://developer.chrome.com/devtools/docs/remote-debugginghttps://developer.chrome.com/devtools/docs/remote-debugginghttp://blog.qqbrowser.cc/

  • iOS

    Settings->Safari->Advanced->Developer + Safari(Mac) Develop

    Xcode

    24

  • BrowserSync

    25

    http://www.browsersync.io/

  • 26