最近在开发嵌入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和一般的安卓都可以解决,唯独小米自带浏览器还有问题* {在添加完这段代码后,在IOS 上会有问题的,这个时候你会发现input 框无法正在输入了内容了;
-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;
}
造成这个原因就是 -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中。<script src="https://api.github.com?callback=angular.callbacks._0" type="text/javascript"></script>因为当请求被发送时,AngularJS会在DOM中生成一个如下所示的<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