{"action":"closed","issue":{"url":"https://api.github.com/repos/cycold/cycold.github.io/issues/10","repository_url":"https://api.github.com/repos/cycold/cycold.github.io","labels_url":"https://api.github.com/repos/cycold/cycold.github.io/issues/10/labels{/name}","comments_url":"https://api.github.com/repos/cycold/cycold.github.io/issues/10/comments","events_url":"https://api.github.com/repos/cycold/cycold.github.io/issues/10/events","html_url":"https://github.com/cycold/cycold.github.io/issues/10","id":49978531,"number":10,"title":"web mobile issues ","user":{"login":"cycold","id":2446601,"avatar_url":"https://avatars.githubusercontent.com/u/2446601?v=3","gravatar_id":"","url":"https://api.github.com/users/cycold","html_url":"https://github.com/cycold","followers_url":"https://api.github.com/users/cycold/followers","following_url":"https://api.github.com/users/cycold/following{/other_user}","gists_url":"https://api.github.com/users/cycold/gists{/gist_id}","starred_url":"https://api.github.com/users/cycold/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/cycold/subscriptions","organizations_url":"https://api.github.com/users/cycold/orgs","repos_url":"https://api.github.com/users/cycold/repos","events_url":"https://api.github.com/users/cycold/events{/privacy}","received_events_url":"https://api.github.com/users/cycold/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/cycold/cycold.github.io/labels/mobile","name":"mobile","color":"fbca04"}],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2014-11-25T05:34:11Z","updated_at":"2016-08-16T07:48:57Z","closed_at":"2016-08-16T07:48:57Z","body":"**屏幕旋转改变字体大小问题**\r\n>\r\n **某一些** android浏览器在屏幕旋转时,某些标签中(h3,h4,...)的字体会改变大小.\r\n在ios中好像可以通过: `-webkit-text-size-adjust: none;` 禁止.但是在android中这样设置好像没有效果.(发现在mx3中自带的浏览器屏幕旋转后,字体会发生改变)\r\n测试地址: http://icewaters.github.io/issuesDemo/font-change-landscape.html\r\n另从 [腾讯移动Web前端知识库](https://github.com/AlloyTeam/Mars) 得知 `-webkit-text-size-adjust`最佳方案应设置为`100%`,当设置为`none`时,会使桌面版 Safari 的字体缩放功能会失效.最佳设置:\r\n```\r\n-webkit-text-size-adjust: 100%;\r\n-ms-text-size-adjust: 100%;\r\ntext-size-adjust: 100%;\r\n```\r\n\r\n**禁止用户选中文字**\r\n>\r\n`-webkit-user-select:none`\r\n **特别注意:** 当在通配符选择器`*`中,要排除掉`input`, `textarea`等需要输入的表单元素,此属性不能用在`input`等输入的表单元素上,否则会导致某些浏览器中表单无法输入文字,如果要在`*`选择器中使用,请排除掉要输入的表单元素 **要谨慎的使用通配符`*`选择器**.\r\n```css\r\n* { -webkit-user-select:none; }\r\ninput,textarea { \r\n    -webkit-user-select:text; \r\n    -moz-user-select:-moz-text;\r\n    -moz-user-select:text;\r\n}\r\n/**或者**/\r\n*:not(input), *:not(textarea){  -webkit-user-select:none; }\r\n```\r\n\r\n**禁止在任何链接上弹出窗口**\r\n>\r\n```\r\n*{\r\n    -ms-touch-action: none;\r\n    -webkit-touch-callout: none;\r\n}\r\n```\r\n\r\n**去除点击高亮**\r\n在移动端点击一个可点击元素默认会出现一个元素大小的半透明颜色覆盖到元素上。这是为了让用户感觉到这个元素已经被点击了。但有时候这个效果不是我们希望的，可以通过如下全局css设置把它去掉\r\n>\r\n```\r\n*{\r\n    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n    -moz-tap-highlight-color: rgba(0, 0, 0, 0);\r\n}\r\n```\r\n但在移动端IE10上，需要如下代码才能去除\r\n`<meta name=\"msapplication-tap-highlight\" content=\"no\" />`\r\n\r\n**触摸屏上的伪类**\r\n>\r\n在Safari上使用hover和active位类时，手指点击一次链接，那么那个链接的hover会被一直触发，如果长按一个链接，那么他的active会被一直触发。所以目前看来使用css伪类是不保险的，只能通过js模拟。\r\n伪类 :active 生效\r\n要CSS伪类 :active 生效，只需要给 document 绑定 touchstart 或 touchend 事件\r\n`<script> document.addEventListener('touchstart',function(){},false); </script>`\r\n\r\n**scroll与touchmove**\r\n>\r\n在Safari上scroll事件不如PC上发生得那么频繁，只有在页面滚动动画结束之后才会很吝啬得发生一次。如果需要比较实时得检测用户把页面拖动到什么位置了，建议使用touchmove事件。\r\n\r\n**滚动回弹特效**\r\n>\r\n通过overflow:scroll可以使内容可以滚动，但是没有物理弹性，比较生硬，没有滚动条。如果想要IOS那种弹性的滚动效果可以使用css:\r\n`-webkit-overflow-scrolling:touch;`\r\n但是加上这个css后会产生滚动条（通常不显示，滚动才显示）\r\n[移动前端开发大杂烩](https://github.com/hoosin/mobile-web-favorites) 提到:\r\n只要把它加在body{}区域，所有的overflow需要滚动的都可以生效了?\r\n\r\n**禁止自动识别(电话,Email地址)**\r\n>\r\n`<meta name=\"format-detection\" content=\"telephone=no; email=no; address=no\" />`\r\n\r\n**使用特殊链接**\r\n>\r\n如果你关闭自动识别后 ，又希望某些电话号码能够链接到 iPhone 的拨号功能 ，那么可以通过这样来声明电话链接\r\n```html\r\n<a href=\"tel:12345654321\">打电话给我</a>\r\n<a href=\"sms:12345654321\">发短信</a>\r\n//或者用于其他元素上\r\n<td onclick=\"location.href='tel:122'\"></td>\r\n```\r\n\r\n**自动大写与自动修正**\r\n>\r\n要关闭这两项功能，可以通过autocapitalize 与autocorrect 这两个选项：\r\n`<input type=\"text\" autocapitalize=\"off\" autocorrect=\"off\" />`\r\n\r\n**UC浏览器全屏标签**\r\n>\r\n`<meta name=\"full-screen\" content=\"yes\">`\r\n\r\n\r\n---------------------------------------------------------------------\r\n主要参考: \r\n[移动前端开发大杂烩](https://github.com/hoosin/mobile-web-favorites)\r\n[腾讯移动Web前端知识库](https://github.com/AlloyTeam/Mars)\r\n[maxzhang宝贵的移动开发前端经验](https://github.com/maxzhang)\r\nhttp://www.cnblogs.com/flash3d/archive/2013/09/28/3343877.html\r\nhttp://www.cnblogs.com/PeunZhang/p/3553020.html\r\n\r\n\r\n"}}
{"actor":{"display_login":"cycold"}}