mobile web development fundamentals - part one

The First Thing

Background

  • mobile os market

Develop Mode

1. mobile website development

2. mobile web application

development

3. hybrid app development*

Challenges

  • cross-platform css and javascript
  • h5 new features
  • responsive design and implementation and screen resolution radio problem
  • native function interaction
  • debugging solution
  • performance optimization
  • and so on ...

And then?

Css pixels is different from device pixels!

Note: Mechanism of zooming!

Viewport in PC

The function of the viewport is to constrain the <html> element, which is the uppermost containing block of your site.

Viewport actually is the browser window

Viewport in PC

// layout viewport's width and height.
// actually "document.documentElement"
// is the <html> element.
// but if u set <html> element's 
// width/height by css,
// it also return viewport's width/height
// because it is rule
document.documentElement.clientWidth
document.documentElement.clientHeight
// Measuring the visual viewport
// what's the difference from layout viewport
window.innerWidth/Height

Measurement

Viewport in Mobile

Difference, two viewport:

 Imagine the layout viewport as being a large image which does not change size or shape. Now image you have a smaller frame through which you look at the large image. The small frame is surrounded by opaque material which obscures your view of all but a portion of the large image. The portion of the large image that you can see through the frame is the visual viewport. You can back away from the large image while holding your frame (zoom out) to see the entire image at once, or you can move closer (zoom in) to see only a portion. You can also change the orientation of the frame, but the size and shape of the large image (layout viewport) never changes.

Viewport in mobile

  • The visual viewport

Note: alterable value!!

Viewport in mobile

  • The layout viewport

Note: relatively

fixed

value!!

Meta Viewport

Syntax:

<meta name="viewport" content="name=value,name=value">

Way to reset the width of layout viewport

Meta Viewport

Notes:

  1. how the browser display page when meta viewport is not set?
  2. browser's bug: meta viewport 's initial-scale directive
  3. all scale directives is relative to ideal viewport
  4. browser's action when initial-scale and width derectives are conflict?
  5. etc...

 zoom factor = ideal viewport width / visual viewport width

Little example

Conclusion

Add this

<meta name="viewport" content="width=device-width, initial-scale=1">

To HTML !

Layout

  1. px

  2. %(Fluid layout)

  3. Responsive Layout

    • show or hide
    • touch and mouse
    • grid

  4. Rem

  5. Flex layout

Flex Layout

  • Concept

direction-agnostic

vertical centering is difficult?

effective layout

The Flexbox Layout (Flexible Box) module (currently a W3C Last Call Working Draft) aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word "flex").

Flex Layout

  • Basic

Flex Layout

  • CSS & Playground

Properties for the parent:

  • display
  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

Properties for the items:

  • order
  • flex-grow
  • flex-shrink
  • flex-flow
  • flex-basis
  • align-self

Play!http://the-echoplex.net/flexyboxes/

Flex Layout

  • Notes
  1. flex-direction decides main axis. flex-wrap is relative to cross axis.
  2. justify-content layout items on main axis and align-items/align-content(difference) layout items on cross axis.
  3. flex-grow/shrink/basis default value
  4. layout when all items' flex-grow is 1
  5. calculate the width of item when items' flex-grow is different

Miscellaneous

  • IOS
// run in full-screen mode
<meta name="apple-mobile-web-app-capable" content="yes">


// disable telephone recognization in safari
<meta name="format-detection" content="telephone=no">

// Styling the Status Bar
// Setting a Startup Image
// apple-touch-icon
// ...

Miscellaneous

  • Android
// run in full-screen mode
<meta name="mobile-web-app-capable" content="yes">


// disable telephone recognization in safari
<meta name="format-detection" content="email=no">

// ...

HTML5

  • Input tag
  • Canvas
  • Video
  • LocalStorage
  • Web Workers
  • Location
  • ...

  • sketch

  • viewport template

  • layout

  • miscellaneous

  • H5

  • native function

Thanks!

Mobile web development fundamentals - part one

By Moxhe

Made with Slides.com

Mobile web development fundamentals - part one

  • 1,250

More from Moxhe