{"id":4607,"date":"2015-12-22T20:25:27","date_gmt":"2015-12-22T12:25:27","guid":{"rendered":"https:\/\/sdeno.com\/?p=4607"},"modified":"2016-02-29T18:32:52","modified_gmt":"2016-02-29T10:32:52","slug":"%e6%89%8b%e6%9c%ba%e7%a7%bb%e5%8a%a8%e7%ab%af%e5%bc%80%e5%8f%91%e8%a7%a3%e5%86%b3%e6%96%b9%e6%a1%88","status":"publish","type":"post","link":"https:\/\/sdeno.com\/?p=4607","title":{"rendered":"\u624b\u673a\u79fb\u52a8\u7aef\u5f00\u53d1\u89e3\u51b3\u65b9\u6848"},"content":{"rendered":"

css app \u624b\u673a \u524d\u7aef bootstrap\u5fae\u4fe1\u6ce8\u610f\u7ec6\u8282<\/p>\n

\u76f8\u5173\u94fe\u63a5\u300acss\u521d\u59cb\u5316<\/a>\u300b<\/p>\n

1\u3001<meta> \u5143\u7d20<\/h3>\n

meta \u6807\u7b7e\u4f4d\u4e8e head \u6807\u7b7e\u4e4b\u95f4\uff0c\u662f HTML \u8bed\u8a00\u7684\u4e00\u4e2a\u8f85\u52a9\u6027\u6807\u7b7e\uff0c\u5408\u7406\u7684\u8bbe\u7f6e\u5728\u79fb\u52a8\u7aef\u4e2d\u8d77\u7740\u975e\u5e38\u91cd\u8981\u7684\u4f5c\u7528\u3002\u4e0b\u9762\u5217\u4e3e\u51e0\u4e2a\u5e38\u7528\u7684\u7528\u6cd5\uff1a<\/p>\n

        \/\/ \u5f3a\u5236\u8ba9\u6587\u6863\u7684\u5bbd\u5ea6\u4e0e\u8bbe\u5907\u7684\u5bbd\u5ea6\u4fdd\u63011:1\uff0c\u5e76\u4e14\u6587\u6863\u6700\u5927\u7684\u5bbd\u5ea6\u6bd4\u4f8b\u662f1.0\uff0c\u4e14\u4e0d\u5141\u8bb8\u7528\u6237\u70b9\u51fb\u5c4f\u5e55\u653e\u5927\u6d4f\u89c8\r\n        <meta content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;\" name=\"viewport\">\r\n\r\n        \/\/ \u7981\u6b62\u767e\u5ea6SiteApp\u8f6c\u7801\u58f0\u660e\r\n        <meta http-equiv=\"Cache-Control\" content=\"no-siteapp\">\r\n\r\n        \/\/ \u7981\u6b62\u81ea\u52a8\u8bc6\u522b\u7535\u8bdd\u548c\u90ae\u7bb1\uff1b\r\n        <meta name=\"format-detection\" content=\"telephone=no, email=no\">\r\n\r\n        \/\/ \u6307\u5b9aiphone\u4e2dsafari\u9876\u7aef\u7684\u72b6\u6001\u6761\u7684\u6837\u5f0f(default\uff1a\u767d\u8272\uff1bblack\uff1a\u9ed1\u8272\uff1bblack-translucent \uff1a\u534a\u900f\u660e)\uff1b\r\n        <meta name=\"apple-mobile-web-app-status-bar-style\" content=\"black-translucent\">\r\n\r\n        \/\/ \u6dfb\u52a0\u5230 IOS \u4e3b\u5c4f\u540e\u7684\u6807\u9898 \r\n        <meta name=\"apple-mobile-web-app-title\" content=\"\u89c9\u552f\u8bbe\u8ba1\">\r\n\r\n        \/\/ \u9690\u85cf\u5730\u5740\u680f\uff0c\u542f\u7528 WebApp \u5168\u5c4f\u6a21\u5f0f\r\n\t<meta name=\"apple-mobile-web-app-capable\" content=\"yes\">\r\n\r\n\t\/\/ \u4f18\u5148\u4f7f\u7528 IE \u6700\u65b0\u7248\u672c\u548c Chrome\r\n\t<meta http-equiv=\"X-UA-Compatible\" content=\"IE=Edge,chrome=1\">\r\n\r\n        \/\/ \u6ce8\u660e\u4f5c\u8005\r\n        <meta name=\"author\" content=\"www.jiawin.com\">\r\n<\/pre>\n
2\u3001font-family \u5b57\u4f53\u9009\u62e9<\/h3>\n
body {font-family: \"Helvetica Neue\", Helvetica, STHeiTi, sans-serif;}<\/pre>\n
iOS 4.0+ \u4f7f\u7528\u82f1\u6587\u5b57\u4f53 Helvetica Neue\uff0c\u4e4b\u524d\u7684iOS\u7248\u672c\u964d\u7ea7\u4f7f\u7528 Helvetica\u3002\u4e2d\u6587\u5b57\u4f53\u8bbe\u7f6e\u4e3a\u534e\u6587\u9ed1\u4f53STHeiTi\uff08\u4e2d\u6587\u540d\u79f0\u53eb\u9ed1\u4f53-\u7b80\uff09\u3002\u8bbe\u8ba1\u65f6\u5019\u4e00\u822c\u7528\u534e\u6587\u9ed1\u4f53\u6765\u4ee3\u66ff\uff0c\u4e24\u8005\u5dee\u5f02\u5fae\u5c0f\u3002<\/p>\n
3\u3001\u4f7f\u7528 rem \u66ff\u4ee3 em \u5355\u4f4d<\/h3>\n
rem\uff08root element\uff0chtml\uff09\u662f CSS3 \u65b0\u589e\u7684\u4e00\u4e2a\u76f8\u5bf9\u5355\u4f4d\uff0c\u76f8\u5bf9\u4e8e\u6839\u76ee\u5f55\u7684 em \u800c\u4e0d\u662f\u76f8\u5bf9\u4e8e\u7236\u5143\u7d20\uff0c\u4e5f\u5c31\u662f\u8bf4\uff0c\u5b83\u867d\u7136\u662f\u76f8\u5bf9\u503c\uff0c\u4f46\u662f\u53ea\u662f\u76f8\u5bf9\u4e8e\u6839\u76ee\u5f55\u6765\u8bf4\u7684\uff08\u4e5f\u5c31\u662f html\uff09\uff0c\u5b83\u4e0d\u4f1a\u968f\u7740\u5176\u5b83\u5143\u7d20\u7684\u6539\u53d8\u800c\u6539\u53d8\u3002\u901a\u8fc7\u5b83\u65e2\u53ef\u4ee5\u505a\u5230\u53ea\u4fee\u6539\u6839\u5143\u7d20\u5c31\u6210\u6bd4\u4f8b\u7684\u8c03\u6574\u6240\u6709\u5b57\u4f53\u5927\u5c0f\uff0c\u53c8\u53ef\u4ee5\u907f\u514d\u5b57\u4f53\u5927\u5c0f\u9010\u5c42\u590d\u5408\u7684\u8fde\u9501\u53cd\u5e94\u3002\u4ece\u800c\u53ef\u4ee5\u6709\u6548\u7684\u5feb\u901f\u4fdd\u6301\u4efb\u4f55\u5206\u8fa8\u7387\u4e0b\u4fdd\u6301\u89c6\u89c9\u4e00\u81f4\u3002<\/p>\n
4\u3001\u7981\u6b62\u9009\u62e9<\/h3>\n
\u5f53\u4f60\u5e0c\u671b\u9875\u9762\u4e0a\u7684\u6587\u5b57\u6216\u8005\u56fe\u7247\u4e0d\u88ab\u7528\u6237\u9009\u62e9\u65f6\u5019\u4ea6\u6216\u8005\u7981\u6b62\u957f\u6309\u4fdd\u5b58\u56fe\u7247\u65f6\uff0c\u53ef\u4ee5\u4f7f\u7528\u8fd9\u4e2a\u65b9\u6cd5\u6765\u5b9e\u73b0\u3002\u662f\u4e0d\u662f\u5f88\u65b9\u4fbf\u7684\u8bf4\uff0c\u4f46\u6ce8\u610f\u7684\u662f\u4e0d\u53ef\u6ee5\u7528\uff0c\u5426\u5219\u4f1a\u51fa\u73b0\u4e00\u4e9b\u65e0\u6cd5\u8f93\u5165\u6216\u8005\u70b9\u51fb\u7684\u60c5\u51b5\u3002<\/p>\n
    a, img {\r\n       -webkit-touch-callout:none;  \/* \u7981\u6b62\u957f\u6309\u94fe\u63a5\u4e0e\u56fe\u7247\u5f39\u51fa\u83dc\u5355 *\/\r\n    }\r\n\r\n    html, body {\r\n       -webkit-user-select:none;   \/* \u7981\u6b62\u9009\u4e2d\u6587\u672c\uff08\u5982\u65e0\u6587\u672c\u9009\u4e2d\u9700\u6c42\uff0c\u6b64\u4e3a\u5fc5\u9009\u9879\uff09 *\/\r\n       user-select:none;\r\n    }<\/pre>\n
5\u3001html5\u91cd\u529b\u611f\u5e94\u4e8b\u4ef6<\/h3>\n
\u8fd8\u8bb0\u5f97\u6ee1\u5927\u8857\u7684\u6447\u4e00\u6447\u62bd\u5956\u5417\uff1f\u5927\u90e8\u5206\u6838\u5fc3\u4ee3\u7801\u5c31\u662f\u8fd9\u4e2a\u3002<\/p>\n
        if (window.DeviceMotionEvent) { \r\n            window.addEventListener('devicemotion',deviceMotionHandler, false);  \r\n        } \r\n        var speed = 30;\/\/speed\r\n        var x = y = z = lastX = lastY = lastZ = 0;\r\n        function deviceMotionHandler(eventData) {  \r\n            var acceleration =event.accelerationIncludingGravity;\r\n            x = acceleration.x;\r\n            y = acceleration.y;\r\n            z = acceleration.z;\r\n            if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed || Math.abs(z-lastZ) > speed) {\r\n                alert('\u522b\u6447\u90a3\u4e48\u5927\u529b\u561b...');\r\n                \/\/ your code here\r\n            }\r\n            lastX = x;\r\n            lastY = y;\r\n            lastZ = z;\r\n        }\r\n<\/pre>\n
6\u3001CSS3\u52a8\u6548\u7c7b\u578b<\/h3>\n
\u5e38\u89c1\u7684CSS3\u52a8\u753b\u6548\u679c\u7c7b\u578b\uff1a
\n
<\/div>
<\/div><\/div><\/div>\"\u52a8\u6548\u7c7b\u578b\"<\/figure><\/p>\n
7\u3001touch\u4f18\u5316\u70b9\u51fb\u4e8b\u4ef6<\/h3>\n
\u79fb\u52a8\u7aef\u4e0atouch\u4e8b\u4ef6\u6709\u56db\u4e2a\uff0c\u5176\u89e6\u53d1\u987a\u5e8f\u4e3a\uff1a<\/p>\n
touchstart -> touchmove ->  touchend -> touchcancel<\/pre>\n
\u5728\u79fb\u52a8\u7aef click \u4f1a\u6709 300ms \u7684\u5ef6\u8fdf\uff0c\u6240\u4ee5\u4f53\u9a8c\u5341\u5206\u5dee\uff0c\u5efa\u8bae\u5c01\u88c5\u7684 tap \u4e8b\u4ef6\u6765\u4ee3\u66ff click \u4e8b\u4ef6\uff08\u5176\u5b9e tap \u662f\u7531 touchstart \u4e8b\u4ef6 + touchmove \u5224\u65ad + touchend \u4e8b\u4ef6\u5c01\u88c5\u7ec4\u6210\uff09\u3002<\/p>\n
\u6ce8\uff1a\u5bf9\u4e8e\u67d0\u4e9b android \u7cfb\u7edf touch \u7684 bug:\u00a0<\/strong>
\n\u6bd4\u5982\u624b\u6307\u5728\u5c4f\u5e55\u7531\u4e0a\u5411\u4e0b\u62d6\u52a8\u9875\u9762\u65f6\uff0c\u7406\u8bba\u4e0a\u662f\u4f1a\u89e6\u53d1 \u4e00\u4e2a touchstart \uff0c\u5f88\u591a\u6b21 touchmove \uff0c\u548c\u6700\u7ec8\u7684 touchend \uff0c\u53ef\u662f\u5728android 4.0\u4e0a\uff0ctouchmove\u53ea\u88ab\u89e6\u53d1\u4e00\u6b21\uff0c\u89e6\u53d1\u65f6\u95f4\u548ctouchstart \u5dee\u4e0d\u591a\uff0c\u800ctouchend\u76f4\u63a5\u6ca1\u6709\u88ab\u89e6\u53d1\u3002\u8fd9\u662f\u4e00\u4e2a\u975e\u5e38\u4e25\u91cd\u7684bug\uff0c\u5728google Issue\u5df2\u6709\u4e0d\u5c11\u4eba\u63d0\u51fa ,\u8fd9\u4e2a\u5f88\u86cb\u75bc\u7684bug\u662f\u5728\u6a21\u62df\u4e0b\u62c9\u5237\u65b0\u662f\u9047\u5230\u7684\u5c24\u5176\u5f53touchmove\u7684dom\u8282\u70b9\u6570\u91cf\u53d8\u591a\u65f6\u6bd4\u51fa\u73b0\uff0c\u5f53\u65f6\u89e3\u51b3\u529e\u6cd5\u5c31\u662f\u7528settimeout\u6765\u7a00\u91catouchmove\u3002<\/p>\n
8\u3001base64\u7f16\u7801\u56fe\u7247\u66ff\u6362\u5c0f\u56fe\u7247<\/h3>\n
\u5bf9\u4e8e\u4e00\u4e9b\u5c0f\u56fe\u7247icon\u4e4b\u7c7b\u7684\uff0c\u53ef\u4ee5\u5c06\u56fe\u7247\u7528base64\u7f16\u7801\uff0c\u6765\u51cf\u5c11\u7f51\u7edc\u8bf7\u6c42\u3002\u4f46\u662f\u5bf9\u4e8e\u5927\u56fe\uff0c\u5c31\u4e0d\u8981\u4f7f\u7528base64\u7f16\u7801\u4e86\uff0c\u4e0d\u7136\u4f60\u7684\u4ee3\u7801\u4f1a\u53d8\u6210\u65e0\u5e95\u6d1e\uff0c\u62c9\u4ee3\u7801\u6eda\u52a8\u6761\u62c9\u5230\u4f60\u60f3\u54ed\u3002\u7f16\u7801\u548c\u89e3\u7801\u4e5f\u9700\u8981\u8ba1\u7b97\u91cf\uff0c\u6bd4\u8f83\u8017\u8d39CPU\u3002<\/p>\n
base64\u6709\u4ee5\u4e0b\u51e0\u4e2a\u4f18\u70b9\uff1a<\/p>\n