WebView 良药 android

标签类

1. 固定页面宽度

   [html]  view plain copy

   1. <meta name="viewport" content="width=320,user-scalable=0" />  
   2. <meta name="viewport" content="width=device-width, initial-scale=1.0"/>   

2. 触控面积

   请保证将每条数据都放在一个 a 标签中，为何这样做？因为在触控手机上，为提升用户体验，尽可能的保证用户的可点击区域较大。

3. 调用手机拨电话面板、短信面板

   [html]  view plain copy

   1. <a href="tel:18005555555">Call us at 1-800-555-5555</a>    
   2.   
   3. <a href="sms:18005555555">  
   4. <a href="sms:18005555555,18005555556">                
   5. <a href="sms:18005555555?body="> //大都不支持body参数  

4. 去除 Android 平台中对手机、邮箱地址的识别

   [html]  view plain copy

   1. <meta content="email=no"     name="format-detection" />  
   2. <meta content="telephone=no" name="format-detection" />  

5. 如何禁止用户旋转设备

   iOS已经禁止开发者阻止 orientationchange 事件，那 Android 呢？对不起，我没有找到任何资料说 Android 禁止开发者阻止浏览器 orientationchange 事件，但是在 Android 平台，确实也是阻止不了的。

6. 如何关闭 iOS 中键盘自动大写

   当虚拟键盘弹出时，默认情况下键盘是开启首字母大写的功能的，根据某些业务场景，可能我们需要关闭这个功能，移动版本 webkit 为 input 元素提供了 autocapitalize 属性，通过指定 autocapitalize=”off” 来关闭键盘默认首字母大写。

   另，设置是否使用输入的自动更正、自动不全、英文自动首字母大写。

   [html]  view plain copy

   1. <meta content="email=no"     name="format-detection" />  
   2. <meta content="telephone=no" name="format-detection" />  

7. IE8 CSS Selector

   IE8 虽然提供 CSS Selector 的 querySelector()/querySelectorAll()，但搜索不了自定义标签，不过你可以用*[attrib=value]搜索，但效率较低。

8. 检测是否视网屏幕

   [javascript]  view plain copy

   1. window.devicePixelRatio  

9. 浏览器是否支持"media queries"

   [javascript]  view plain copy

   1. window.matchMedia();  

10. Android Android 的 webview 保存密码的问题

    可用 WebViewClient 的 onReceivedHttpAuthRequest 事件监听。详见这里。
    

11. JS 添加 Do Not Track(DNT)，保护访客隐私

    大多数的网络浏览器的设置中有一个“Do Not Track”（DNT 即“不追踪”）设定，让用户能够控制自己的隐私信息被追踪的情况。 但是网站到底是否真的不追踪，还要看网站本身是否响应它 那么，做一个善良的网站，如果用户设置了Do Not Track,那么就保护一下他的隐私吧！

    [javascript]  view plain copy

    1. if(!navigator.doNotTrack){  
    2.   // 这里面写搜集信息的脚本，如果开启DNT则不执行  
    3. }  

    同理，nodejs的：

    [javascript]  view plain copy

    1. var dnt=function(){  
    2.   return (headers['HTTP_DNT']==1)  
    3. }  

    ref：http://blog.regou.me/?p=721

12. 解决网站内容存在多个版本时，指定规范链接，帮助解决内容重复收录问题

    [html]  view plain copy

    1. <link rel="canonical" href="http://www.domain.com/index.html" />   

    有利于 SEO，注意地址不能跨域。

13. DNS Prefetch

    [html]  view plain copy

    1. <link rel="dns-prefetch" href="http://hm.baidu.com/">  

    DNS Prefetch 也就是 DNS 预获取，也是前段优化的一部分。在前段优化中关于 DNS 的有两点：一是减少 DNS 的请求次数，第二个就是进行 DNS 预先获取。DNS Prefetch 应该尽量的放在网页的前面，推荐放在 <meta charset=”/> 后面。

14. Link Prefetching

    [html]  view plain copy

    1. <link rel="prefetch" href="http://daker.me/2013/05/hello-world.html" />  
    2. <link rel="prefetch" href="http://daker.me/assets/images/avatar.png" />  

    Link Prefetching 特性允许开发者在页面加载的时候预先加载他们希望指定的页面或元素。你也能够使用 prerendering 特性令你的网站速度更快，浏览器能够在后台获取并渲染整个页面，用户点击相应链接时再为用户展示该页面。

样式类

1. 自适应布局模式

   在编写 CSS 时，不建议把容器的宽度定死。为达到适配各种手持设备，对 ipad、itouch、ipod、iphone、android、web safarik、chrome 都能够正常的显示，你无需再次考虑设备的分辨率。

2. 禁止浏览器默认行为

   [css]  view plain copy

   1. a, img{  
   2.   /* 禁止用户在新窗口打开页面、如何禁止用户保存图片＼复制图片 for iOS */  
   3.   -webkit-touch-callout:none;  
   4. }  
   5.   
   6. *{  
   7.   /* 禁止用户选中文字 for iOS */  
   8.   -webkit-user-select : none;  
   9.   /*很多Android 浏览器的 a 链接有边框，这里取消它*/  
   10.   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);  
   11. }  

   安卓手机取消长按出现“复制”按钮的话，要修改 Webview 默认行为：
   

   [java]  view plain copy

   1. webView.setOnLongClickListener(new OnLongClickListener(){  
   2.     public boolean onLongClick(View v) {  
   3.         return true;  
   4.     }  
   5. });  

3. 如何解决盒子边框溢出

   当你指定了一个块级元素时，并且为其定义了边框，设置了其宽度为100％。在移动设备开发过程中我们通常会对文本框定义为宽度100％，将其定义为块级元素以实现全屏自适应的样式，但此时你会发现，该元素的边框(左右)各1个像素会溢了文档，导致出现横向滚动条，为解决这一问题，我们可以为其添加一个特殊的样式 -webkit-box-sizing:border-box; 用来指定该盒子的大小包括边框的宽度。

4. 解决 CSS3 无法编写高光和内发光

   这个时候你不妨使用 -webkit-border-image 来定义这个按钮的样式。 见下面正确代码和效果图：

   [html]  view plain copy

   1. <style type="text/css">  
   2. .bbb{width:300px; height:40px; line-height:40px;border:1px solid #dcdcdc;box-shadow:0px 0px 10px rgba(0,0,0,0.2) inset;border-radius:10px;}  
   3. </style>  
   4.   
   5.   
   6. <div class="bbb">ttttttttttttttttttttt</div>  
   
   

5. iOS 4 没有 float:fixed

   苹果用户一般都会升级他们的操作系统，升级到 iOS 5 之后的版本就可以了。因此可以不考虑该问题的兼容性。

6. 使用 LESS 样式框架 include 模板问题

   网页中只需 include xx.less 文件一次，其余的在那个 xx.less 中引入而不是与 xx.less 同级平衡，否则会出现重复加载的问题。

7. Android 2.x 样式 active 失效

   其实点击那一下使用 cssSelecto:active 比 cssSelector:hover 更符合点击的效果，特别在列表滚动时尤其明显。但 Android 2.x 样式 active 失效，只好用 hover。如果用 js 实现，可参考如下：

   [javascript]  view plain copy

   1. /** 
   2.  * 模拟 el:active 
   3.  * @param {Element} ul 参数为<ul></ul>元素 
   4.  */  
   5. function onActive(ul){  
   6.     // ONLY FOR Android 2.x? Yes!  
   7.     // 检测是否 android 2.x 的属性，你可以依赖你自己的方案，我的就不贴了，比较简单的。  
   8.     // if (!window.navigator.isAndroid_2) {  
   9.         // return ul; //尽管该函数不工作，也要返回 this，以方便链式调用  
   10.     // }  
   11.       
   12.     // add Highlight  
   13.     ul.addEventListener('touchstart', function (e){  
   14.         var targetEl = e.target;  
   15.         while(targetEl && targetEl.tagName != 'LI'){// 默认为 li 修改样式  
   16.             targetEl = targetEl.parentNode;         // 找到要操作的目标元素为止  
   17.         }  
   18.         // do sth……  
   19.         console.log(targetEl.tagName);  
   20.         targetEl.addCls('active');  
   21.     });  
   22.   
   23.     // remove Highlight  
   24.     ul.addEventListener('touchend',   function (e){  
   25.         var targetEl = e.target;  
   26.         while(targetEl && targetEl.tagName != "LI"){  
   27.             targetEl = targetEl.parentNode; // 找到要操作的目标元素为止  
   28.         }  
   29.         // do sth……  
   30.         console.log(targetEl.tagName);  
   31.         targetEl.removeCls('active');  
   32.     });   
   33.       
   34.     return ul; // 方便链式调用  
   35. }  

   CSS 样式如下：

   [css]  view plain copy

   1. /* 点击效果 */  
   2. ul.x_list li:active, ul.x_list li.active {  
   3.     background-image: -webkit-gradient(linear, center top, center bottom, from(lightGrey), to(white));  
   4. }  

页面特效类

1. 阻止页面整体滚动

   [javascript]  view plain copy

   1. document.body.addEventListener('touchmove', function(event) {  
   2.   event.preventDefault();  
   3. }, false);   

2. 去掉浏览器地址栏

   [javascript]  view plain copy

   1. window.setTimeout(scrollTo, 0, 0, 0);  

   这句代码必须放在 window.onload 里才能够正常的工作，而且你的当前文档的内容高度必须是高于窗口的高度时，这句代码才能有效的执行。

3. iOS 中如何获取滚动条的值

   桌面浏览器中想要获取滚动条的值是通过 document.scrollTop 和 document.scrollLeft 得到的，但在 iOS 中你会发现这两个属性是未定义的，为什么呢？因为在 iOS 中没有滚动条的概念，在 Android 中通过这两个属性可以正常获取到滚动条的值，那么在 iOS 中我们该如何获取滚动条的值呢？通过 window.scrollY 和 window.scrollX 我们可以得到当前窗口的 y 轴和 x 轴滚动条的值。

4. 无法使用 Applicatipon Cache

   可以考虑使用 localStorage 代替。

5. 复位 Applicatipon Cache 的一个办法

   在我们的3G版网站的项目中使用了html5 application cache，将大部分图片资源、js、css等静态资源放在manifest文件中。没想到上线第一天就遇到了严重问题：application cache会默认缓存当前页面！！！就算我们有如下设置：NETWORK:*也就是说，对于所有的动态页面，application cache会缓存起来，用户怎么刷新都是老的！而且手机浏览器还很难清除掉，也不支持js清除！花了一个上午，尝试了很多办法，查了很多资料，都没能清除掉客户端的缓存。一上午被用户投诉惨了。最后还是万能的stackoverflow救了我：
   Do not use appcache unless it is REALLY 100% EXACTLY WHAT YOU WANT TO DO Even if it IS 100% EXACTLY WHAT YOU WANT TO DO, 
   *DO NOT* use appcache until you are 100% CERTAIN that you are not going to make a single change to that page (or any file that it links to) for a LONG time. Delete the manifest file from the server -- if the browser can't find the manifest file, then it will clear its cache... ...this will also turn caching off for everyone. Don't turn it on again until it's 100% CORRECT Dealing with appcache is miserable, often.
   解决办法很简单，在服务器端删除掉manifest文件，并且慎用application cache

6. Safari 日期转换

   这是 Safari 浏览器的一个 bug，故桌面版和移动版都会有。不能用常规的 Date.format 方法解析日期类型。可尝试一下下面的补丁。

   [javascript]  view plain copy

   1. var regexp = /[- :]/;  
   2.                           
   3. var _begin = (program.begin).split(regexp);  
   4. var _end   = (program.end).split(regexp);  
   5.                           
   6. var begin  = new Date(_begin[0], _begin[1]-1, _begin[2], _begin[3], _begin[4], _begin[5]);  
   7. var end    = new Date(_end[0], _end[1]-1, _end[2], _end[3], _end[4], _end[5]);  
   8. var now    = new Date;  
   9.                           
   10. var arr = (program.begin).split(regexp);  
   11. //var date = new Date(arr[0], arr[1]-1, arr[2], arr[3], arr[4], arr[5]);  

7. iOS 不能override UserAgent？

   如果是的话，那就缺乏轻松识别“基座模式”的途径。在 Android 上，重写 ua 却是一件轻易的事情。不过可以用以下方法代替：window.navigator.standalone 可用于判断当前web app是否从主屏启动。注意，这只在ios设备有效。

8. 区域滚动

   要在一个 div 产生一个可滚动的区域，默认下是完全没有硬件加速的滚动效果的，效率很差，一顿一顿的滚动用户体验相当的不好。无论 iOS 和 android 都是，即使你使用 iframe 的也不行。不过苹果开发人员能意识到这个问题真的很“蛋疼”，从 iOS 5 开始于 overflow 项提供一个 scroll 的属性，使得苹果手机上可以有加速的区域滚动。但反观安卓方面，似乎很不负责任，到 4.1 都没有收到风声说优化此问题。解决方案有很多种，有人也曾经归纳过。比较主流的方法使用 iScroll 库。

9. Android 4.0.下 touchend 滑动不能触发

   又是一个很蛋疼的问题。

10. Android 4.0 transform 3D 极慢

    综上安卓 4.x WebView 所带来的问题，只能说，新的版本不一定好。android 2.x 都没有该问题。

11. 制作跑马灯特效时的两个移动的不同

    尽管两者同时作用于一个控件（或 div ）之上，但其性质是不一样的，一个是平移（move），相对于 D&D 的水平方向移动，是跟随手指移动着的；另外一个是滚动（scrollTo），跳到指定的哪一帧。

12. 制作跑马灯使用 left/top 与使用 transformX/Y 的不同

    坐标系没有发生变化。不过 css3 的方式可以要求 mover 元素不为绝对定位。

13. 检测是否已连网，以及网络速度

    最通用的：

    [javascript]  view plain copy

    1. if (window.navigator.onLine) {  
    2.   alert('online')  
    3. } else {  
    4.   alert('offline');  
    5. }  
    6. // in IE 8 "online" and "ofline" events are raised on the document.body, under IE 9 - on both document.body and window  
    7. window.addEventListener("offline", function(e) {alert("offline");});  
    8. window.addEventListener("online", function(e) {alert("online");});  

    判断是否 wifi 网络

    [javascript]  view plain copy

    1. if (navigator.connection.type==navigator.connection.WIFI) {   
    2.    // code for WiFi connections (high-bandwidth)    
    3. }  

    写成一个函数：

    [javascript]  view plain copy

    1. /** 
    2.  * 检测是否已连网，以及网络速度。 
    3.  * @return {String} [description] 
    4.  */  
    5. function netDetect(){  
    6.     //alert(window.navigator.userAgent);  
    7.     var connection, connectionSpeed;    
    8.         
    9.     // create a custom object if navigator.connection isn't available    
    10.     connection = navigator.connection || {'type':'0'};   
    11.   
    12.     switch(connection.type){  
    13.         case connection.ETHERNET:  
    14.         case connection.WIFI:  
    15.             connectionSpeed = 'highbandwidth';   
    16.         break;  
    17.         case connection.CELL_3G:   
    18.             connectionSpeed = 'mediumbandwidth';   
    19.         break;   
    20.         case connection.CELL_2G:   
    21.             connectionSpeed = 'lowbandwidth';   
    22.         break;   
    23.         case connection.UNKNOWN:  
    24.         default:   
    25.             connectionSpeed = 'noConnect';  
    26.     }  
    27.       
    28.     return connectionSpeed;  
    29. }  

14. iOS 5 下通过 url 快速访问应用

    他们是直接将网页进行Base64编码，省的创建一堆页面，将该页面添加到主屏幕后 meta里的图标信息就生效了，伪装成一个系统应用，然后再点击开这个伪装的应用的时候 js判断 window.navigator.standalone==true 的时候 触发点击 href=“prefs:root=MESSAGES” 。最核心的是iOS5 可以href prefs:访问到应用，window.navigator.standalone的判断很巧妙，base64解码一下就清楚了。
    参考：
    http://www.zhihu.com/question/19916323/answer/13342363
    http://holgr.com/blog/2011/11/no-jailbreak-necessary-how-to-quickly-access-ios-settings-on-your-ipad-iphone-or-ipod/
    

15. 事件委托 Event Delegation 之循环 vs 递归

    都是集中在如何获取父级元素（因为是“冒泡”所以是获取父元素，如果是“捕获”方式则是获取子元素）。初步看了， 循环好一点，起码不会死循环。

    [javascript]  view plain copy

    1. // 递归方式  
    2. /** 
    3.  * this 应为 CSS Selector 
    4.  * @param {Event} e 
    5.  */  
    6. function removeHighlight(e){  
    7.     var targetEl = e.target;  
    8.     if(targetEl && targetEl.tagName == this.toUpperCase()){  
    9.         targetEl.removeCls('active');  
    10.     }else if(targetEl){  
    11.         arguments.callee.call(this, {  
    12.             target : targetEl.parentNode  
    13.         });  
    14.     }  
    15. }  
    16.   
    17. ul.addEventListener(highEvent_out, removeHighlight.bind(el_cssSelector || 'LI'));  
    18.   
    19. // 循环方式  
    20. function removeHighlight(e){  
    21.    var targetEl = e.target;  
    22.    while(targetEl && targetEl.tagName != 'LI'){// 默认为 li 修改样式  
    23.       targetEl = targetEl.parentNode;         // 找到要操作的目标元素为止  
    24.    }  
    25.    // do sth……  
    26.    console.log(targetEl.tagName);  
    27.    targetEl.removeCls('active');  
    28. }  

开发、调试技巧

1. 手机上不容易复制、粘贴，有啥好办法？

   可以通过 QQ 发消息，但多个 QQ 同时登陆又有另外衍生的问题。如果是网址，推荐使用二维码的方式。给手机装个二维码扫描软件，然后把 url 放到在线的二维码生成，如http://www.liantu.com/，之后用扫一下就可以啦。

2. 使用 SourceMap 时记得要把未压缩、未混淆的文件也放上去。