移动端常见的兼容性问题
2017-12-08 本文已影响0人
alipy_258
1. meta 基础知识点如下
// 启动或禁用自动识别页面中的电话号码
<meta name="format-detection" content="telephone=no" />
// 启动或禁用自动识别邮箱地址
<meta name="format-detection" content="email=no" />
// 设置 Web 应用是否以全屏模式运行。
<meta name="apple-mobile-web-app-capable" content="yes">
// ios 的 safari 顶端状态条的样式，可选的参数有：default、black、black-translucent
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
// winphone 系统 a、input 标签被点击时产生的半透明灰色背景怎么去掉
<meta name="msapplication-tap-highlight" content="no">
2. input 基础知识点如下
// input 输入框不可编辑
<input type="text" name="name" value="xxx" disabled="true"/>
<input type="text" name="name" value="xxx" readonly="true"/>
/* disabled 文本框变灰，通过request.getParameter("name")得不到文本框中的内容
readonly 只是使文本框不能输入，样式没有变化，通过request.getParameter("name")可以得到内容 */
// ios 输入的时候英文首字母的默认大写
<input autocapitalize="off" autocorrect="off" />
// android 上去掉语音输入按钮
input::-webkit-input-speech-button {
display: none
}
// ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉
a,button,input,textarea{
-webkit-tap-highlight-color: rgba(0,0,0,0;)
-webkit-user-modify:read-write-plaintext-only;
}
/* -webkit-user-modify 这个属性使用需谨慎，副作用就是输入法不再能够输入多个字符
另外，有些机型去除不了，如小米2
对于按钮类，不使用a或者input标签，直接用div标签 */
// 表单元素的默认外观重置
-webkit-appearance:none;
// 修改表单输入框 placeholder 的颜色值
input::-webkit-input-placeholder{color:#ccc;}
input:focus::-webkit-input-placeholder{color:#eee;}
// 注意 placeholder, ios 可以换行，android 不可以
// 禁用 select 默认下拉箭头
select::-ms-expand {display: none;}
// 禁用 radio 和 checkbox 默认样式
input[type=radio]::-ms-check,
input[type=checkbox]::-ms-check {
display: none;
}
// 禁用 PC 端表单输入框默认清除按钮
input[type=text]::-ms-clear,
input[type=tel]::-ms-clear,
input[type=number]::-ms-clear {
display: none;
}
3. 部分安装手机 a 标签用作按钮的时候，页面显示空白
解决办法：用 button 标签替换 a 标签
4. 微信禁止、选中文本
body {
-webkit-user-select: none;
}
5. 禁止 ios 长按时不触发系统的菜单，禁止 ios&android 长按时下载图片
.css {
-webkit-touch-callout: none
}
6. 移动端字体单位的选择 font-size 选择 px 还是rem
解决办法：
- 需要适配手机设备，使用 px 即可
- 需要适配各种移动设备，使用 rem，例如需要适配 iPhone 和iPad等分辨率差别比较挺大的设备，我们就选择 rem
7. 移动端 click 事件，使屏幕产生 200-300ms 的延迟响应
解决办法：
- 使用 fastclick.js
- zepto.js 里面的 tap 事件也可以解决 click 的延迟问题
8. 大屏幕中，图片有时候会变模糊
解决办法：用背景图片替换 img 标签，设计稿切出来的图片长宽保证为偶数，并使用 backgroud-size把图片缩小为原来的 1/2；
例如图片宽高为：100px*100px，那么 css 写法如下：
.css{
background:url() no-repeat center center;
background-size: 50px 50px;
width:50px;
height:50px;
}
9. 打电话&发短信&发邮件的如何实现
// 打电话
<a href="tel:0755-10086">打电话给:0755-10086</a>
<a href="tel:4008106999,1034">400-810-6999 转 1034</a>
// 发短信
<a href="sms:10086">发短信给: 10086</a>
// 发短信 短信内容 （本人进行测试，多个号码发送短信，功能实现不了，始终给第一个号码发送）
安卓手机：<a href="sms:10086?body=内容">发短信给: 10086</a>
苹果手机：<a href="sms:10086&body=内容">发短信给: 10086</a>
多个号码：<a href="sms:10086,10010&body=内容">发短信给: 10086和10010</a>
<a href="sms:10086,10010?body=内容">发短信给: 10086和10010</a>
// 发邮件
<a href="mailto:peun@foxmail.com">单击这里给peun发电子邮件</a>
// 移动web页面自动探测电话号码：
<meta name="format-detection" content="telephone=yes">
// 使用wtai协议进行拨打电话：
<a href="wtai://wp//mc;15110418977">拨打XXX</a>
<a href="wtai://wp/ap;15110418977;">将XXX存储至电话簿 </a>
// 在电话号码前加上 + （加号）表示国际号码:
<a href="wtai://wp/mc;+15110418977">+15110418977</a>
// 地图定位GPS：
<a href="geopoint:[经度],[纬度]">me位置</a> 比如：<a href="geopoint:200,20">me位置</a>
10. 屏幕旋转的事件和样式
// 1. 事件
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;
}
}
// 2. 样式
/*竖屏时使用的样式*/
@media all and (orientation:portrait) {
.css{}
}
/*横屏时使用的样式*/
@media all and (orientation:landscape) {
.css{}
}
11. H5 audio 和 video 在 ios 和 andriod 中无法自动播放
// 需要手动去触发事件来播放
$('.div').one('touchstart',function(){
audio.play()
})
12. 阻止用户调整微信浏览器字体大小
// ios 管事，android 暂无解决方案
body{
-webkit-text-size-adjust: 100%!important;
}
13. 解决 transition 闪屏
.css{
/*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/
-webkit-transform-style: preserve-3d;
/*（设置进行转换的元素的背面在面对用户时是否可见：隐藏）*/
-webkit-backface-visibility: hidden;
}
14. @-webkit-keyframes 注意
- 以0%开始100%结束，0%的百分号不能去掉
- after和before伪类无法使用动画
15. border-radius 注意
- 不支持%单位
- 三星 Galaxy S4中自带浏览器不支持 border-radius 缩写
- 同时写入 border-radius 和背景色的时候，背景色会溢出到圆角以外部分
16. active兼容处理 , 有时候伪类 :active 失效
// 1. body 添加 ontouchstart
<body ontouchstart="">
// 2. js 给 document 绑定 touchstart 或 touchend 事件
// css
a { color:#ccc;}
a:active{ color:#f0f;}
// html
<a herf=''>bar</a>
// js
document.addEventListener('touchstart', function(){}, false);
17. 视频，音频获取播放结束后的回调函数－ended
$('#video').on('ended',function(){
alert(0);
});
18. ios 视频默认全屏播放，如何阻止全屏播放－ webkit-playsinline
<video id="video" src="" webkit-playsinline poster="" ></video>
18. 前端 iphonex 适配问题
目前有三种方法：
1. 机型适配
通过判断 navigator.userAgent 中的字符串 iphone 和 iphoneX 的设备宽和高
const isIphoneX = () => {
return /iphone/gi.test(navigator.userAgent) && (screen.height == 812 && screen.width == 375)
}
2. 通过媒体查询，判断设备宽高和dpr
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
background: red;
}
或者
@media only screen and (width: 375px) and (height: 690px){
body {
background: red;
}
}
3. 通过 css3 的 content，设置 viewport-fit=cover
<meta name="viewport" content="initial-scale=1, viewport-fit=cover">
body {
background: grey;
padding-top: constant(safe-area-inset-top);
padding-left: constant(safe-area-inset-left);
padding-right: constant(safe-area-inset-right);
padding-bottom: constant(safe-area-inset-bottom);
}
为您推荐
http://www.open-open.com/lib/view/open1449325854077.html
https://mp.weixin.qq.com/s/JVUpsz9QHsNV0_7U-3HCMg
