H5页面窗口自动调整到设备宽度，并禁止用户缩放页面
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
忽略将页面中的数字识别为电话号码
<meta name="format-detection" content="telephone=no" />
忽略Android平台中对邮箱地址的识别
<meta name="format-detection" content="email=no" />
当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari
<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- ios7.0版本以后，safari上已看不到效果 -->
将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式
<meta name="apple-mobile-web-app-status-bar-style" content="black" /> <!-- 可选default、black、black-translucent -->
rem配置参考：
html{font-size:10px}
@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}
@media screen and (min-width:800px){html{font-size:25px}}
ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉
ios用户点击一个链接，会出现一个半透明灰色遮罩, 如果想要禁用，可设置-webkit-tap-highlight-color的alpha值为0，也就是属性值的最后一位设置为0就可以去除半透明灰色遮罩
a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;)}
部分android系统中元素被点击时产生的边框怎么去掉
android用户点击一个链接，会出现一个边框或者半透明灰色遮罩, 不同生产商定义出来额效果不一样，可设置-webkit-tap-highlight-color的alpha值为0去除部分机器自带的效果
a,button,input,textarea{
-webkit-tap-highlight-color: rgba(0,0,0,0;)
-webkit-user-modify:read-write-plaintext-only;
}
-webkit-user-modify有个副作用，就是输入法不再能够输入多个字符
另外，有些机型去除不了，如小米2
winphone系统a、input标签被点击时产生的半透明灰色背景怎么去掉
<meta name="msapplication-tap-highlight" content="no">
webkit表单元素的默认外观怎么重置
.css{-webkit-appearance:none;}
webkit表单输入框placeholder的颜色值能改变么
input::-webkit-input-placeholder{color:#AAAAAA;}
input:focus::-webkit-input-placeholder{color:#EEEEEE;}
webkit表单输入框placeholder的文字能换行么
ios可以，android不行~
禁用 select 默认下拉箭头
::-ms-expand 适用于表单选择控件下拉箭头的修改，有多个属性值，设置它隐藏 (display:none) 并使用背景图片来修饰可得到我们想要的效果。
select::-ms-expand {
display: none;
}
禁用 radio 和 checkbox 默认样式
::-ms-check 适用于表单复选框或单选按钮默认图标的修改，同样有多个属性值，设置它隐藏 (display:none) 并使用背景图片来修饰可得到我们想要的效果。
input[type=radio]::-ms-check,
input[type=checkbox]::-ms-check
{
display: none;
}
禁用PC端表单输入框默认清除按钮
当表单文本输入框输入内容后会显示文本清除按钮，::-ms-clear 适用于该清除按钮的修改，同样设置使它隐藏 (display:none) 并使用背景图片来修饰可得到我们想要的效果。
input[type=text]::-ms-clear,
input[type=tel]::-ms-clear,
input[type=number]::-ms-clear
{
display: none;
}
禁止ios 长按时不触发系统的菜单，禁止ios&android长按时下载图片
.css{-webkit-touch-callout: none}
禁止ios和android用户选中文字
.css{-webkit-user-select:none}
参考《如何改变表单元素的外观(for Webkit and IE10)》
打电话发短信写邮件怎么实现
打电话
<a href="tel:0755-10086">打电话给:0755-10086</a>
发短信，winphone系统无效
<a href="sms:10086">发短信给: 10086</a>
写邮件，可参考《移动web页面给用户发送邮件的方法》
<a href="mailto:peun@foxmail.com">peun@foxmail.com</a>
模拟按钮hover效果
移动端触摸按钮的效果，可明示用户有些事情正要发生，是一个比较好体验，但是移动设备中并没有鼠标指针，使用css的hover并不能满足我们的需求，还好国外有个激活css的active效果，代码如下，
<style type="text/css">
a{-webkit-tap-highlight-color: rgba(0,0,0,0);}
.btn-blue{display:block;height:42px;line-height:42px;text-align:center;border-radius:4px;font-size:18px;color:#FFFFFF;background-color: #4185F3;}
.btn-blue:active{background-color: #357AE8;}
</style>
</head>
<body>
<div class="btn-blue">按钮</div>
<script type="text/javascript">
document.addEventListener("touchstart", function(){}, true)
</script>屏幕旋转的事件和样式
事件
window.orientation，取值：正负90表示横屏模式、0和180表现为竖屏模式；
window.onorientationchange = function(){
switch(window.orientation){
case -90:
case 90:
alert("横屏:" + window.orientation);
case 0:
case 180:
alert("竖屏:" + window.orientation);
break;
}
}
样式
//竖屏时使用的样式
@media all and (orientation:portrait) {
.css{}
}
//横屏时使用的样式
@media all and (orientation:landscape) {
.css{}
}
audio元素和video元素在ios和andriod中无法自动播放
应对方案：触屏即播
$('html').one('touchstart',function(){
audio.play()
})
可参考《无法自动播放的audio元素》
摇一摇功能
HTML5 deviceMotion：封装了运动传感器数据的事件，可以获取手机运动状态下的运动加速度等数据。
手机拍照和上传图片
<input type=”file”>的accept 属性
<!-- 选择照片 --> <input type=file accept="image/*"> <!-- 选择视频 --> <input type=file accept="video/*">
使用总结：
ios 有拍照、录像、选取本地图片功能
部分android只有选取本地图片功能
winphone不支持
input控件默认外观丑陋
微信浏览器用户调整字体大小后页面矬了，怎么阻止用户调整
原因
android侧是复写了layoutinflater 对textview做了统一处理
ios侧是修改了body.style.webkitTextSizeAdjust值
解决方案：
/**
* 页面加入这段代码可使Android机器页面不再受到用户字体缩放强制改变大小
* 但是会有一个1秒左右的延迟，期间可以考虑通过loading展示
* 仅供参考
*/
(function(){
if (typeof(WeixinJSBridge) == "undefined") {
document.addEventListener("WeixinJSBridgeReady", function (e) {
setTimeout(function(){
WeixinJSBridge.invoke('setFontSizeCallback',{"fontSize":0}, function(res) {
alert(JSON.stringify(res));
});
},0);
});
} else {
setTimeout(function(){
WeixinJSBridge.invoke('setFontSizeCallback',{"fontSize":0}, function(res) {
alert(JSON.stringify(res));
});
},0);
}
})();ios使用-webkit-text-size-adjust禁止调整字体大小
body{-webkit-text-size-adjust: 100%!important;}
最好的解决方案：
整个页面用rem或者百分比布局
消除transition闪屏
.css{
/*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/
-webkit-transform-style: preserve-3d;
/*（设置进行转换的元素的背面在面对用户时是否可见：隐藏）*/
-webkit-backface-visibility: hidden;
}
取消input在ios下，输入的时候英文首字母的默认大写
<input autocapitalize="off" autocorrect="off" />
android 上去掉语音输入按钮
input::-webkit-input-speech-button {display: none}
android 2.3 bug
- @-webkit-keyframes 需要以0%开始100%结束，0%的百分号不能去掉
- after和before伪类无法使用动画animation
- border-radius不支持%单位
- translate百分比的写法和scale在一起会导致失效，例如-webkit-transform: translate(-50%,-50%) scale(-0.5, 1)
-
android 4.x bug
- 三星 Galaxy S4中自带浏览器不支持border-radius缩写
- 同时设置border-radius和背景色的时候，背景色会溢出到圆角以外部分
- 部分手机(如三星)，a链接支持鼠标:visited事件，也就是说链接访问后文字变为紫色
- android无法同时播放多音频audio
-
设计高性能CSS3动画的几个要素
- 尽可能地使用合成属性transform和opacity来设计CSS3动画，不使用position的left和top来定位
- 利用translate3D开启GPU加速
-
参考《High Performance Animations》
fixed bug
- ios下fixed元素容易定位出错，软键盘弹出时，影响fixed元素定位
- android下fixed表现要比iOS更好，软键盘弹出时，不会影响fixed元素定位
- ios4下不支持position:fixed
-
解决方案
- 可用isroll.js，暂无完美方案
如何阻止windows Phone的默认触摸事件
winphone下默认触摸事件事件使用e.preventDefault是无效的
目前解决方法是使用样式来禁用
html{-ms-touch-action: none;}/* 禁止winphone默认触摸事件 */
参考
《Windows phone 8 touch support》
播放视频不全屏
<!-- 1.ios7+支持自动播放 2.支持Airplay的设备（如：音箱、Apple TV)播放 x-webkit-airplay="true" 3.播放视频不全屏 webkit-playsinline="true" --> <video x-webkit-airplay="true" webkit-playsinline="true" preload="auto" autoplay src="http://"></video>
扫一扫
1319
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
