手机端h5开发部分问题及解决方案

最近在开发嵌入APP中的h5页面，记录开发过程中遇到一些问题，及其解决方案

1、页面在ios 中不能滑动，或滑动卡顿，安卓中无此问题
解决方法：

页面html

<div data-role="page"  class="wrapper" >
    <div class="scroller">
       内容
   </div>
</div>
css
.wrapper{
    position: absolute;
    z-index: 100;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
.scroller{
    z-index: -100;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

2、
去除
Android
平台中对邮箱地址的识别
 
去除
Android
平台中对邮箱地址的识别
 
去除Android平台中对邮箱地址的识别

解决：在head中加入<meta content="email=no" name="format-detection" /> 

3、手机会自动识别数字为拨打电话，并增加样式
解决：<meta name="format-detection" content="telephone=no" />

4、长按页面，div内内容会被选中，出现菜单栏
解决：加入样式，可禁止用户进行复制，ios和一般的安卓都可以解决，唯独小米自带浏览器还有问题
 
 

  
  * {
  
    
-webkit-touch-callout:none;  /*系统默认菜单被禁用*/  

  
   -webkit-user-select:none; /*webkit浏览器*/   
  
  
 -khtml-user-select:none; /*早期浏览器*/   
  
  
-moz-user-select:none;/*火狐*/   
  
  
 -ms-user-select:none; /*IE10*/   
  
  
 user-select:none;  

  
  
}
 
 
在添加完这段代码后，在IOS 上会有问题的，这个时候你会发现input 框无法正在输入了内容了；
造成这个原因就是 -webkit-user-select:none; 这个属性造成的。
解决这个方法 就是 在css 文件中同时设置一下input 的属性，如下所示：
input {      
     -webkit-user-select:auto; /*webkit浏览器*/     
}

5、ajax 跨域问题
解决：
（1）jquery ajax 使用jsonp去get,返回的json串需包在callback中
$.ajax({
    type: "GET",
    dataType:"jsonp",
    url: "",
    jsonpCallback:"callback",
    jsonp: "callback",
    success:function (response) {}
}）

（2） angular ajax 使用jsonp ,请求地址后加上？callback=JSON_CALLBACK，返回json串需包在angular.callbacks._0中。
因为当请求被发送时，AngularJS会在DOM中生成一个如下所示的<script>标签：
　<script src="https://api.github.com?callback=angular.callbacks._0" type="text/javascript"></script> 
JSON_CALLBACK被替换成了一个特地为此请求生成的自定义函数。
当支持JSOPN的服务器返回数据时，数据会被包装在由AngularJS生成的具名函数angular.callbacks._0
如：
angular.callbacks._0({ 
　　　　'meta': { 　}, 
　　　　'data': { 　} 
　　}) 
html：
<div ng-app="myApp" ng-controller="siteCtrl"></div>
script:
var url=baseUrl+"?callback=JSON_CALLBACK";  
var app = angular.module('myApp', []);
app.controller('siteCtrl', function($scope, $http) {
    $http.jsonp(url)
            .success(function (response) {})
}）






参考文章：http://www.cnblogs.com/xuan-0107/p/4434110.html
http://wenku.baidu.com/link?url=PFgo9VBbNBmqMUyk2s5ggJpWS7WZ3rDOQ1yyDQr6mbprton15hUuk1e0jNcA1qZjj2Go6yQ2L7tgbOiopiWZFWmF7i3YJONRxqGB8z7-nfS