//禁止复制,选中文本
Element {
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
//长时间按页面闪退
element {
-webkit-touch-callout: none;
}
//iphone下输入框默认内阴影
Element{
-webkit-appearance: none;
}
//旋转屏幕时字体大小问题
*{
-webkit-text-size-adjust:100%;
}
//设置缓存
<meta http-equiv="Cache-Control" content="no-cache" />
不希使用缓存可以设置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" />
<input type="text" id="testInput">
<script type="text/javascri
[/color]pt">
document.getElementById(‘testInput‘).addEventListener(‘input‘, function(e){
var value = e.target.value;
});
</script>
[color=darkblue]
//浏览器私有及其它meta
QQ浏览器私有
全屏模式 <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">
UC浏览器私有
全屏模式 <meta name="full-screen" content="yes">
强制竖屏 <meta name="screen-orientation" content="portrait">
强制横屏 <meta name="screen-orientation" content="landscape">
应用模式 <meta name="browsermode" content="application">
//移动端背景无法固定
在移动端制作固定背景时(利用fixed)会出现滚动条滚动时,背景图会跟着滚动,下面的方案可以解决这个问题:
body:before {
content: ' ';
position: fixed;
z-index: -1;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: url(...) center 0 no-repeat;
background-size: cover;
}
//border-radius
border-radius设置为奇数时,在pc上是圆的,在手机上是不圆的,所以在制作的时候,将border-radius制作成偶数值。
//圆的
width:8px;
height:8px;
border-radius:50%;
//不圆的
width:9px;
height:9px;
border-radius:50%;
//IOS中input键盘事件keyup、keydown、keypress支持不是很好
问题是这样的,用input search做模糊搜索的时候,在键盘里面输入关键词,会通过ajax后台查询,然后返回数据,然后再对返回的数据进行关键词标红。用input监听键盘keyup事件,在安卓手机浏览器中是可以的,但是在ios手机浏览器中变红很慢,用输入法输入之后,并未立刻相应keyup事件,只有在通过删除之后才能相应!
解决方法:可以用html5的oninput事件去代替keyup[/size][/size]