解决jquery ajax调用远程接口的跨域问题
$.ajax({
type:'get',
url:url,
// 下面的两行代码,就是解决跨域的关键
xhrFields: {withCredentials: true},
crossDomain: true,
// 就是上面的两行代码
success: function(data){
// do something
},
error: function(data){
// do something
}
});
安卓浏览器看背景图片，有些设备会模糊。
background:url(../images/icon/all.png) no-repeat center center;
-webkit-background-size:50px 50px;
background-size: 50px 50px;display:inline-block; width:100%; height:50px;
图片加载
<li><canvas></canvas></li>
var total=17;
var zWin=$(window);
var render=function(){
var padding=2;
var winWidth=zWin.width();
var picWidth=Math.floor((winWidth-padding*3)/4);
var tmpl ='';
for (var i=1;i<=totla;i++){
var p=padding;
var imgSrc='img/'+i+'.jpg';
if(i%4==1){
p=0;
}
tmpl +='<li+picWidth+'px;height:'+picWidth+'px;padding-left:'+p+'px;padding-top:'+padding+'px;"><canvas id="cvs_'+i+'"></canvas></li>';
var imageObj = new Image();
imageObj.index = i;
imageObj.onload = function(){
var cvs =$('#cvs_'+this.index)[0].getContext('2d');
cvs.width = this.width;
cvs.height=this.height;
cvs.drawImage(this,0,0);
}
imageObj.src=imgSrc;
}
}
render();
apple-mobile-web-app-capable
<meta name="apple-mobile-web-app-capable" content="yes">
format-detection
<meta name="format-detection" content="telephone=no">
html5调用安卓或者ios的拨号功能
<a href="tel:4008106999,1034">400-810-6999 转 1034</a>
上下拉动滚动条时卡顿、慢
body {
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
}
禁止复制、选中文本
Element {
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
长时间按住页面出现闪退
element {
-webkit-touch-callout: none;
}
iphone及ipad下输入框默认内阴影
Element{
-webkit-appearance: none;
}
ios和android下触摸元素时出现半透明灰色遮罩
Element {
-webkit-tap-highlight-color:rgba(255,255,255,0)
}
active兼容处理 即 伪类 :active 失效
<body ontouchstart="">
<style>
a {
color: #000;
}
a:active {
color: #fff;
}
</style>
<a herf=foo >bar</a>
<script>
document.addEventListener('touchstart',function(){},false);
</script>
动画定义3D启用硬件加速
Element {
-webkit-transform:translate3d(0, 0, 0)
transform: translate3d(0, 0, 0);
}
Retina屏的1px边框
Element{
border-width: thin;
}
旋转屏幕时，字体大小调整的问题
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
-webkit-text-size-adjust:100%;
}
transition闪屏
/设置内嵌的元素在 3D 空间如何呈现：保留3D /
-webkit-transform-style: preserve-3d;
/ 设置进行转换的元素的背面在面对用户时是否可见：隐藏 /
-webkit-backface-visibility:hidden;
圆角bug
background-clip: padding-box;
顶部状态栏背景色
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
设置缓存
<meta http-equiv="Cache-Control" content="no-cache" />
桌面图标
<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png" />
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png" />
<link rel="apple-touch-icon-precomposed" href="touch-icon-iphone.png" />
浏览器私有及其它meta
<meta name="x5-fullscreen" content="true">
<meta name="x5-orientation" content="portrait">
<meta name="x5-orientation" content="landscape">
<meta name="x5-page-mode" content="app">
<meta name="full-screen" content="yes">
<meta name="screen-orientation" content="portrait">
<meta name="screen-orientation" content="landscape">
<meta name="browsermode" content="application">
<meta name="HandheldFriendly" content="true">
<meta name="MobileOptimized" content="320">
<meta name="msapplication-tap-highlight" content="no">
IOS中input键盘事件keyup、keydown、keypress支持不是很好
<input type="text" id="testInput">
<script type="text/javascript">
document.getElementById('testInput').addEventListener('input', function(e){
var value = e.target.value;
});
</script>
IOS键盘字母输入，默认首字母大写
<input type="text" autocapitalize="off" />
select 下拉选择设置右对齐
select option {
direction: rtl;
}
通过transform进行skew变形，rotate旋转会造成出现锯齿现象
-webkit-transform: rotate(-4deg) skew(10deg) translateZ(0);
transform: rotate(-4deg) skew(10deg) translateZ(0);
outline: 1px solid rgba(255,255,255,0);
移动端点击300ms延迟
移动端点透问题
<div id="haorooms">点头事件测试</div>
<a href="www.jb51.net">www.jb51.net</a>
$('#haorooms').on('tap',function(){
$('#haorooms').hide();
});
消除 IE10 里面的那个叉号
input:-ms-clear{display:none;}
关于 iOS 与 OS X 端字体的优化(横竖屏会出现字体加粗不一致等)
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%;
关于 iOS 系统中，中文输入法输入英文时，字母之间可能会出现一个六分之一空格
this.value = this.value.replace(/\u2006/g, '');
移动端 HTML5 audio autoplay 失效问题
document.addEventListener('touchstart', function () {
document.getElementsByTagName('audio')[0].play();
document.getElementsByTagName('audio')[0].pause();
});
移动端 HTML5 input date 不支持 placeholder 问题
<input placeholder="Date" class="textbox-n" type="text" onfocus="(this.type='date')" id="date">
部分机型存在type为search的input，自带close按钮样式修改方法
#Search::-webkit-search-cancel-button{
display: none;
}
唤起select的option展开
$(sltElement).trrgger("mousedown");
function showDropdown(sltElement) {
var event;
event = document.createEvent('MouseEvents');
event.initMouseEvent('mousedown', true, true, window);
sltElement.dispatchEvent(event);
};
服务热线 19970861797
