HTML5 Mobile web App Reader-4 (page infrastructure development) __html

Task:
Up and down Sidebar: absolute positioning or fixed. Relatively independent, so it can be placed in a relatively independent process.
Then there is the content area: Title, content, action Bar.
Referencing Normailze.css,zepto.min.js,jquery.base64.js,jquery.jsonp.js
Zepto is a JavaScript framework for modern smartphone browsers, with a syntax similar to jquery's, but smaller

<meta name= "viewport" content= "Width=device-width,initial-scale=1,user-scalable=no,minimal-ui" >

width–//Viewport width (range from 200 to 10,000, default to 980 pixels) height–//Viewport height (range from 223 to 10,000) initial-scale–//initial indent Scale (range from > 0 to Ten) minimum-scale–//allows the user to zoom to the minimum scale maximum-scale–//allows the user to zoom to the maximum proportion user-scalable–//whether the user can manually scale (No,ye S

<meta name= "format-detection" content= "Telephone=no" >
format recognition

Ignore numbers in a page as phone numbers
-enable devices to browse a Web page with no phone-enabled numbers (different device interpretations, ITouch clicks numbers for contacts, IPhone for phone calls), ignoring numbers on the page as phone numbers.
-If you need to enable the phone feature to be telephone=yes, if you have Google Maps on the page, ITunes and YouTube links will open the appropriate program components on the iOS device.
- structure and style are all started from the view, and then the details
-if you want to look good, still need to rely on their own 1.1 points (position, color)

<! DOCTYPE html>  
  CSS  
 text layout, spacing, button style, container (background) The logic of CSS usually starts with 1. CSS in the "Overflow:scroll" default is left and right, scroll up and down, if there is no excess content, with Overflow:auto; 
 If there is anything beyond the content, use overflow-x: hidden; Set the picture path First, then set the size before it takes effect background-size:contain; adaptive 
  theme Structure  

html{width:100%;
    height:100%;

Overflow-x:hidden;
    } body{Text-align:left;
    width:100%;
    Overflow:hidden;
    Background-color: #e9dfc7;
margin:0;
    }. m-read-content{font-size:14px;
    Color: #555;
    line-height:31px;
    padding:15px; margin:0
0 1em 0; 
    }. m-read-content h4{margin:0;
    font-size:20px;
    Color: #736357;
    border-bottom:1px solid #736357;

letter-spacing:2px;
    }. m-read-content p{text-indent:2em;
    Margin:0.5em 0;
line-height:24px;
    }. m-button-bar{width:70%;
    max-width:800px;
    padding:5px;
margin:0 Auto;
    }. u-tab{height:34px;
    margin-top:0;
    margin-bottom:20px;
    line-height:34px;
    border-radius:8px;
    border:1px solid #858382;
    font-size:12px;
    Background: #000;
    opacity:0.9;
padding:0;
    }. U-tab li{display:inline-block;
    width:49%;
    Text-align:center;
Color: #fff; }. U-tab Li:nth-child (1) {border-right:1px solid #858382; }
 
 The specific CSS will not say. 
  Interaction  
-Return action 
-set the font size and background, and remember what's set up 
-paging, getting data from the server 
  first declare a closure, and define things in it that don't affect the overall Some things.  
 First Step Interaction: Event binding, data storage, generic method encapsulation Localstorage is the form of key:value, so key can easily overlap and overwrite, so we could prefix the key with one. 

Window.jquery = $;



Encapsulates Localstorage storage
(function () {
    var Util = (function () {
        var prefix = ' html5_reader_ ';
        var storagegetter = function (key) {return
            localstorage.getitem (prefix + key);
        }
        var storagesetter = function (key,val) {return
            localstorage.setitem (prefix + key,val);
        }
        return {
            storagegetter:storagegetter,
            storagesetter:storagesetter
        }
    }) ();
    function Main () {
        //todo entry functions for entire project
    }
    //Data layer
    function Readermodel () {
        //todo implementation and reader-related data interaction methods
    }

    Initialize
    function Readerbaseframe () {
        //todo render Basic UI structure
    }

    function Eventhanlder () {
        //todo Interactive event binding
    }

    main ();
}) ();
Tests are tested at call time; question: Why do we use click events without touch or zepto tap events.

 A: The Click event has a 300 millisecond delay before Android 4.0, but it's too old. And on the PC side click event is supported, but TAP is not supported, need to turn on the simulator Oh. It's a bit of a hassle to judge whether it's moving or PC-side. Class naming rules, with-to manipulate the CSS, with _ used to manipulate JS, you can add a prefix, or to see a person's preferences. Pay attention to performance, performance difference is cumulative step by step, and is exponential growth