首先你可能会给页面的html和body增加了height: 100%
, 然后就可能造成IOS上页面滑动的卡顿问题。解决方案是:
(1) 看是否能把body和html的height: 100%
去除掉。
(2) 在滚动的容器中增加:-webkit-overflow-scrolling: touch
或者给body增加:body {overflow-x: hidden}
。
(1) 有时body和html的height: 100%
去除掉问题可能就没有了。
(2) 到达临界值的时候在阻止事件默认行为
var startY,endY;
//记录手指触摸的起点坐标
$('body').on('touchstart',function (e) {
startY = e.touches[0].pageY;
});
$('body').on('touchmove',function (e) {
endY = e.touches[0].pageY; //记录手指触摸的移动中的坐标
//手指下滑,页面到达顶端不能继续下滑
if(endY>startY&& $(window).scrollTop()<=0){
e.preventDefault();
}
//手指上滑,页面到达底部能继续上滑
if(endYwindow).scrollTop()+
$(window).height()>=$('body')[0].scrollHeight){
e.preventDefault();
}
})
有时也会碰见弹窗出来后两个层的橡皮筋效果出现问题,我们可以在弹出弹出时给底层页面加上一个类名,类名禁止页面滑动这样下层的橡皮筋效果就会被禁止,就不会影响弹窗层。
(1) 设置html body的高度为百分比时,margin-bottom
在safari里失效
(2) 直接padding
代替margin
(1)添加样式cursor :pointer
。点击后消除背景闪一下的css:-webkit-tap-highlight-color:transparent;
type="search"
。出现这种情况的原因不明,有的朋友解释:我们平时都是点击的A标签中的文字了。 所以要想用JS模拟点击A标签事件,就得先往A标签中的文字添加能被JS捕获的元素,然后再用JS模拟点击该元素即可。但是我觉得不合理,虽然找不到原因但是解决办法还是有的。
(1)document.getElementById("abc").click();
(2)$("#abc")[0].click();
这是我们想需要用一个本地的图片代替没有找的的图片
<script type="text/javascript">
function nofind(){
var img=event.srcElement;
img.src="images/logoError.png";
img.onerror=null; 控制不要一直跳动
}
script>
<img src="images/logo.png" onerror="nofind();" />
在安卓上面,点击页面底部的输入框,软键盘弹出,页面移动上移。
而ios上面,点击页面底部输入框,软键盘弹出,输入框看不到了。。。查资料说什么的都有,iscroll,jquery-moblie,absolute,fixe,static都非常复杂,要改很多。。。
让他弹出时让滚动条在最低部
var u = navigator.userAgent, app = navigator.appVersion;
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if (isiOS) {
$('textarea').focus(function () {
window.setTimeout('scrollBottom()', 500);
});
}
function scrollBottom() {
window.scrollTo(0, $('body').height());
}
所有的input必须有name不然会出错
navigator.onLine
可判断是否是脱机状态.
Object.keys,Object.keys
方法返回的是一个数组,数组里面装的是对象的属性。var person = {
"name" : "zhangshan",
"sex" : "man",
"age" : "50",
"height" : "180",
"phone" : "1xxxxxxxxxx",
"email" : "[email protected]"
};
var arr = Object.keys(person);
console.log(arr.length);
Object.getOwnPropertyNames(obj).length
Object.keys
定义:返回一个对象可枚举属性的字符串数组;Object.getOwnPropertyNames
定义:返回一个对象可枚举、不可枚举属性的名称;Object.defineProperty
等定义的属性,该标识值默认为 false。var obj = { "prop1": "v1" };
Object.defineProperty(obj, "prop2", { value: "v2", enumerable: false });
console.log(Object.keys(obj).length); //output:1
console.log(Object.getOwnPropertyNames(obj).length); //output:2
console.log(Object.keys(obj)); //output:Array[1] => [0: "prop1"]
console.log(Object.getOwnPropertyNames(obj)); //output:Array[2] => [0: "prop1", 1: "prop2"]
综合实例:
var obj = { "prop1": "v1" };
Object.defineProperty(obj, "prop2", { value: "v2", enumerable: false});
console.log(obj.hasOwnProperty("prop1")); //output: true
console.log(obj.hasOwnProperty("prop2")); //output: true
console.log(obj.propertyIsEnumerable("prop1")); //output: true
console.log(obj.propertyIsEnumerable("prop2")); //output: false
console.log('prop1' in obj); //output: true
console.log('prop2' in obj); //output: true
for (var item in obj) {
console.log(item);
}
//output:prop1
for (var item in Object.getOwnPropertyNames(obj)) {
console.log(Object.getOwnPropertyNames(obj)[item]);
}
//ouput:[prop1,prop2]
type="tel"
type="number"
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
appearance: none;
margin: 0;
}
pattern
属性
js获取的值是空;比如-12,+123等
简单的说就是:
go(-1)
:返回上一页,原页面表单中的内容会丢失;back()
:返回上一页,原页表表单中的内容会保留。history.go(-1)
:后退+刷新history.back()
:后退javascript:history.go()
和history.back()
的区别类似。history.go(-1);
javascript:history.back();
<meta name="viewport"content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
// width 设置viewport宽度,为一个正整数,或字符串‘device-width’
// height 设置viewport高度,一般设置了宽度,会自动解析出高度,可以不用设置
// initial-scale 默认缩放比例,为一个数字,可以带小数
// minimum-scale 允许用户最小缩放比例,为一个数字,可以带小数
// maximum-scale 允许用户最大缩放比例,为一个数字,可以带小数
// user-scalable 是否允许手动缩放
空白页基本meta标签
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection"content="telephone=no, email=no" />
其他meta标签
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="HandheldFriendly" content="true">
<meta name="MobileOptimized" content="320">
<meta name="screen-orientation" content="portrait">
<meta name="x5-orientation" content="portrait">
<meta name="full-screen" content="yes">
<meta name="x5-fullscreen" content="true">
<meta name="browsermode" content="application">
<meta name="x5-page-mode" content="app">
<meta name="msapplication-tap-highlight" content="no">
18.移动端如何定义字体font-family?
@ --------------------------------------中文字体的英文名称
@ 宋体 SimSun
@ 黑体 SimHei
@ 微信雅黑 Microsoft Yahei
@ 微软正黑体 Microsoft JhengHei
@ 新宋体 NSimSun
@ 新细明体 MingLiU
@ 细明体 MingLiU
@ 标楷体 DFKai-SB
@ 仿宋 FangSong
@ 楷体 KaiTi
@ 仿宋_GB2312 FangSong_GB2312
@ 楷体_GB2312 KaiTi_GB2312
@
@ 说明:中文字体多数使用宋体、雅黑,英文用Helvetica
body { font-family: Microsoft Yahei,SimSun,Helvetica; }
// 一、打电话
<a href="tel:0755-10086">打电话给:0755-10086
// 二、发短信,winphone系统无效
<a href="sms:10086">发短信给: 10086
// 三、写邮件
<a href="mailto:[email protected]">点击我发邮件
//2.收件地址后添加?cc=开头,可添加抄送地址(Android存在兼容问题)
<a href="mailto:[email protected][email protected]">点击我发邮件
//3.跟着抄送地址后,写上&bcc=,可添加密件抄送地址(Android存在兼容问题)
<a href="mailto:[email protected][email protected][email protected]">点击我发邮件
//4.包含多个收件人、抄送、密件抄送人,用分号(;)隔开多个邮件人的地址
<a href="mailto:[email protected];[email protected]">点击我发邮件
//5.包含主题,用?subject=
<a href="mailto:[email protected]?subject=邮件主题">点击我发邮件
//6.包含内容,用?body=;如内容包含文本,使用%0A给文本换行
<a href="mailto:[email protected]?body=邮件主题内容%0A腾讯诚信%0A期待您的到来">点击我发邮件
//7.内容包含链接,含http(s)://等的文本自动转化为链接
<a href="mailto:[email protected]?body=http://www.baidu.com">点击我发邮件
//8.内容包含图片(PC不支持)
<a href="mailto:[email protected]?body=
">点击我发邮件
//9.完整示例
<a href="mailto:[email protected];[email protected][email protected][email protected]&subject=[邮件主题]&body=腾讯诚邀您参与%0A%0Ahttp://www.baidu.com%0A%0A
">点击我发邮件
以下支持webkit
touchstart
——当手指触碰屏幕时候发生。不管当前有多少只手指
touchmove
——当手指在屏幕上滑动时连续触发。通常我们再滑屏页面,会调用event的preventDefault()
屏幕时触发
touchcancel
——系统停止跟踪触摸时候会触发。例如在触摸过程中突然页面alert()
一个提示框,此时会触发该事件,这个事件比较少用
TouchEvent说明:
touches
:屏幕上所有手指的信息
targetTouches
:手指在目标区域的手指信息
changedTouches
:最近一次触发该事件的手指信息
touchend时,touches与targetTouches信息会被删除,changedTouches保存的最后一次的信息,最好用于计算手指信息
参数信息(changedTouches[0])
clientX、clientY在显示区的坐标
target:当前元素
事件响应顺序
ontouchstart > ontouchmove > ontouchend > onclick
-webkit-tap-highlight-color
的alpha值为0去除灰色半透明遮罩;-webkit-tap-highlight-color
的alpha值为0去除部分机器自带的效果;
去掉;特殊说明:有些机型去除不了,如小米2。对于按钮类还有个办法,不使用a或者input标签,直接用div标签
a,button,input,textarea {
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-user-modify:read-write-plaintext-only; //-webkit-user-modify有个副作用,就是输入法不再能够输入多个字符
}
// 也可以
* { -webkit-tap-highlight-color: rgba(0,0,0,0); }
//winphone下
"msapplication-tap-highlight" content="no">
input,select { -webkit-appearance:none; appearance: none; }
::-ms-expand
修改表单控件下拉箭头,设置隐藏并使用背景图片来修饰select::-ms-expand { display:none; }
::-ms-check
修改表单复选框或单选框默认图标,设置隐藏并使用背景图片来修饰input[type=radio]::-ms-check,
input[type=checkbox]::-ms-check { display:none; }
::-ms-clear
修改清除按钮,设置隐藏并使用背景图片来修饰input[type=text]::-ms-clear,
input[type=tel]::-ms-clear,
input[type=number]::-ms-clear { display:none; }
html { font-size: 62.5%; } //10*16 = 62.5%
body { font-size:12px; font-size:1.2rem; }
input[disabled],input:disabled,input.disabled{
color: #3e3e3e;
-webkit-text-fill-color: #3e3e3e;
-webkit-opacity:1;
opacity: 1;
}
IE:不管该行有没有文字,光标高度与font-size一致。
FF:该行有文字时,光标高度与font-size一致。该行无文字时,光标高度与input的height一致。
Chrome:该行无文字时,光标高度与line-height一致;该行有文字时,光标高度从input顶部到文字底部(这两种情况都是在有设定line-height的时候),如果没有line-height,则是与font-size一致。
IOS中情况和Chrome 相似。
设置字体大小和行高一致,然后通过 padding 撑开大小
只给IE浏览器设置 line-height-ms-line-height:40px;
button标签替代input时注意,不写type是会出现很多问题。