{"action":"opened","issue":{"url":"https://api.github.com/repos/mishe/blog/issues/107","repository_url":"https://api.github.com/repos/mishe/blog","labels_url":"https://api.github.com/repos/mishe/blog/issues/107/labels{/name}","comments_url":"https://api.github.com/repos/mishe/blog/issues/107/comments","events_url":"https://api.github.com/repos/mishe/blog/issues/107/events","html_url":"https://github.com/mishe/blog/issues/107","id":145901790,"number":107,"title":"稀土首推的前端移动端整理心得摘录","user":{"login":"mishe","id":1996187,"avatar_url":"https://avatars.githubusercontent.com/u/1996187?v=3","gravatar_id":"","url":"https://api.github.com/users/mishe","html_url":"https://github.com/mishe","followers_url":"https://api.github.com/users/mishe/followers","following_url":"https://api.github.com/users/mishe/following{/other_user}","gists_url":"https://api.github.com/users/mishe/gists{/gist_id}","starred_url":"https://api.github.com/users/mishe/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mishe/subscriptions","organizations_url":"https://api.github.com/users/mishe/orgs","repos_url":"https://api.github.com/users/mishe/repos","events_url":"https://api.github.com/users/mishe/events{/privacy}","received_events_url":"https://api.github.com/users/mishe/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":0,"created_at":"2016-04-05T06:32:32Z","updated_at":"2016-04-05T06:32:32Z","closed_at":null,"body":"## 移动端字体单位font-size选择px还是rem\r\n对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可\r\n\r\n对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备\r\n\r\nrem配置参考，适合视觉稿宽度为640px的：\r\n```html\r\n<meta content=\"width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no\" name=\"viewport\">\r\n```\r\n```css\r\nhtml{font-size:10px}\r\n@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}\r\n@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}\r\n@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}\r\n@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}\r\n@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}\r\n@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}\r\n@media screen and (min-width:800px){html{font-size:25px}}\r\n```\r\n\r\n## winphone系统a、input标签被点击时产生的半透明灰色背景怎么去掉\r\n```html\r\n<meta name=\"msapplication-tap-highlight\" content=\"no\">\r\n```\r\n\r\n\r\n## IE10（winphone8）表单元素默认外观如何重置\r\n### 禁用 select 默认下拉箭头\r\n\r\n::-ms-expand 适用于表单选择控件下拉箭头的修改，有多个属性值，设置它隐藏 (display:none) 并使用背景图片来修饰可得到我们想要的效果。\r\n```css\r\nselect::-ms-expand {\r\ndisplay: none;\r\n}\r\n```\r\n### 禁用 radio 和 checkbox 默认样式\r\n\r\n::-ms-check 适用于表单复选框或单选按钮默认图标的修改，同样有多个属性值，设置它隐藏 (display:none) 并使用背景图片来修饰可得到我们想要的效果。\r\n```css\r\ninput[type=radio]::-ms-check,input[type=checkbox]::-ms-check{\r\ndisplay: none;\r\n}\r\n```\r\n### 禁用PC端表单输入框默认清除按钮\r\n\r\n当表单文本输入框输入内容后会显示文本清除按钮，::-ms-clear 适用于该清除按钮的修改，同样设置使它隐藏 (display:none) 并使用背景图片来修饰可得到我们想要的效果。\r\n```css\r\ninput[type=text]::-ms-clear,input[type=tel]::-ms-clear,input[type=number]::-ms-clear{\r\ndisplay: none;\r\n}\r\n```\r\n\r\n## 屏幕旋转的事件和样式\r\n```css\r\n//竖屏时使用的样式\r\n@media all and (orientation:portrait) {\r\n.css{}\r\n}\r\n\r\n//横屏时使用的样式\r\n@media all and (orientation:landscape) {\r\n.css{}\r\n}\r\n```\r\n## 摇一摇功能\r\n\r\n```HTML\r\n\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<meta charset=\"utf-8\">\r\n<meta content=\"width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no\" name=\"viewport\">\r\n<meta content=\"yes\" name=\"apple-mobile-web-app-capable\">\r\n<meta content=\"black\" name=\"apple-mobile-web-app-status-bar-style\">\r\n<meta content=\"telephone=no\" name=\"format-detection\">\r\n<meta content=\"email=no\" name=\"format-detection\">\r\n<title>demo</title>\r\n<style>\r\n*{padding: 0;margin: 0;}\r\nhtml,body{height: 100%;}\r\nh1{position: fixed;bottom: 0;left: 0;width: 100%;font-size: 16px;height: 30px;line-height: 30px;text-align: center;color: #FFFFFF;background-color:black;z-index: 2;}\r\n.page{width: 100%;height: 100%;position: relative;}\r\n[class^=\"page-\"]{display: none;width: 100%;height: 100%;position: absolute;font-size: 30px;text-align: center;line-height: 200px;color: white;}\r\n.show-page-1 .page-1{display: block;background-color: red;}\r\n.show-page-2 .page-2{display: block;background-color: orange;}\r\n.show-page-3 .page-3{display: block;background-color: purple;}\r\n.show-page-4 .page-4{display: block;background-color: green;}\r\n.show-page-5 .page-5{display: block;background-color: blue;}\r\n</style>\r\n</head>\r\n\r\n<body>\r\n<h1>不服你摇，看我72变</h1>\r\n<div class=\"page show-page-1\">\r\n\t<div class=\"page-1\">变成猪</div>\r\n\t<div class=\"page-2\">变成猫</div>\r\n\t<div class=\"page-3\">变成鹅</div>\r\n\t<div class=\"page-4\">变成羊</div>\r\n\t<div class=\"page-5\">变成鸭</div>\r\n</div>\r\n\r\n<script type=\"text/javascript\">\r\nvar shake_threshold = 1200; // 摇动的阀值\r\nvar last_update = 0;// 保存上次更新的时间\r\nvar frequency = 200;// 摇一摇的时间间隔\r\nvar x, y, z, last_x, last_y, last_z,callback; // x：横向贯穿手机屏幕 y：纵向贯穿手机屏幕 z：垂直手机屏幕\r\nvar isMotionAble = window.DeviceMotionEvent;  //判断是否支持加速度传感器\r\nvar MotionAble = {\r\n    /**\r\n     * 设备旋转后的回调方法\r\n     * @method deviceMotionHandler\r\n     * @private\r\n     * @param {Event} eventData 事件对象\r\n    */\r\n    deviceMotionHandler : function(eventData){\r\n        var acceleration = eventData.accelerationIncludingGravity;\r\n\r\n        var curTime = +new Date;\r\n\r\n        if (curTime - last_update > frequency) {\r\n\r\n            var diffTime = curTime - last_update;\r\n            last_update = curTime;\r\n\r\n            x = acceleration.x;\r\n            y = acceleration.y;\r\n            z = acceleration.z;\r\n\r\n            var speed = Math.abs(x +y + z - last_x - last_y - last_z) / diffTime * 10000;\r\n\r\n            if (speed > shake_threshold) {\r\n                callback && callback();\r\n            }\r\n            last_x = x;\r\n            last_y = y;\r\n            last_z = z;\r\n        }\r\n    },\r\n    /**\r\n     * 初始化摇一摇的方法\r\n     * @method init\r\n     * @param {Function} fn 设备摇一摇后的回调方法\r\n     * @param {Number} [frequency:200] 检测摇一摇的时间间隔\r\n    */\r\n    init : function(fn,freq){\r\n        if(isMotionAble){\r\n            window.addEventListener(\"devicemotion\", this.deviceMotionHandler,false);\r\n            callback = fn;\r\n            x = y = z = last_x = last_y = last_z = 0;\r\n            frequency = freq||frequency;\r\n        }\r\n    }\r\n}\r\n\r\nvar currentPageIndex = 1;//当前页面的索引值\r\nvar pageNum = document.querySelector(\".page\").children.length;\r\n//随机显示页面\r\nvar getRandomPage = function(){\r\n  \tvar v = parseInt(Math.random() * pageNum) + 1;\r\n\twhile(v == currentPageIndex){\r\n\t\tv = parseInt(Math.random() * pageNum) + 1;    \t\t\t\r\n\t}\r\n\tcurrentPageIndex = v;\r\n\treturn v;\r\n};\r\n\r\nfunction showRandomTheme(index){\r\n\tcurrentPageIndex = getRandomPage();\r\n\tdocument.querySelector(\".page\").className = \"page show-page-\" + (index||currentPageIndex);\r\n\r\n}\r\nshowRandomTheme();\r\nvar lastTime = +new Date();\r\nMotionAble.init(\r\n\tfunction(){\r\n\t    var now = +new Date();\r\n\t    if(now - lastTime > 1000){  //一秒内只能切换一次\r\n\t    \tshowRandomTheme();\r\n\t    \tlastTime = +new Date();\r\n\t    }\r\n\t},\r\n\t200\r\n)\r\n</script>\r\n\r\n</body>\r\n\r\n</html>\r\n\r\n```\r\n## 取消input在ios下，输入的时候英文首字母的默认大写\r\n<input autocapitalize=\"off\" autocorrect=\"off\" />\r\n\r\n## android 上去掉语音输入按钮\r\ninput::-webkit-input-speech-button {display: none}\r\n\r\n## 如何阻止windows Phone的默认触摸事件\r\nwinphone下默认触摸事件事件使用e.preventDefault是无效的\r\n\r\n目前解决方法是使用样式来禁用\r\nhtml{-ms-touch-action: none;}/* 禁止winphone默认触摸事件 */\r\n\r\n##播放视频不全屏\r\n```HTML\r\n<!--\r\n1.目前只有ios7+、winphone8+支持自动播放\r\n2.支持Airplay的设备（如：音箱、Apple TV)播放\r\nx-webkit-airplay=\"true\" \r\n3.播放视频不全屏，ios7+、winphone8+支持，部分android4+支持（含华为、小米、魅族）\r\nwebkit-playsinline=\"true\" \r\n-->\r\n<video x-webkit-airplay=\"true\" webkit-playsinline=\"true\" preload=\"auto\" autoplay src=\"http://\"></video>\r\n```\r\n\r\n## flex布局\r\nflex布局目前可使用在移动中，并非所有的语法都全兼容，但以下写法笔者实践过，效果良好~\r\n\r\n```css\r\n/* ============================================================\r\n   flex：定义布局为盒模型\r\n   flex-v：盒模型垂直布局\r\n   flex-1：子元素占据剩余的空间\r\n   flex-align-center：子元素垂直居中\r\n   flex-pack-center：子元素水平居中\r\n   flex-pack-justify：子元素两端对齐\r\n   兼容性：ios 4+、android 2.3+、winphone8+\r\n   ============================================================ */\r\n.flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}\r\n.flex-v{-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}\r\n.flex-1{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}\r\n.flex-align-center{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;}\r\n.flex-pack-center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}\r\n.flex-pack-justify{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}\r\n```"}}