浅谈Html5移动端ios/Android兼容性总结


Posted in HTML / CSS onJune 01, 2018

以前做pc端,也会遇到兼容性的问题,不过说实话,脑海里全是ie的问题,并没有什么可特别注意的,可能是我不善总结,现在做移动端(本来觉得移动端很easy,所以没放在眼里),so,我错了,我为自己的轻视高傲买单!

最近就遇见了一些兼容性bug,从网上找了资料。

先说一下viewport

先上模板

<meta charset="utf-8">
<!--主要I是强制让文档的宽度与设备宽度保持1:1,最大宽度1.0,禁止屏幕缩放。-->
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<!--这个也是iphone私有标签,允许全屏浏览。-->
<meta content="yes" name="apple-mobile-web-app-capable">
<!--iphone的私有标签,iphone顶端状态条的样式。-->
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<!--禁止数字自动识别为电话号码,这个比较有用,因为一串数字在iphone上会显示成蓝色,样式加成别的颜色也是不生效的。-->
<meta content="telephone=no" name="format-detection">
<!--禁止email识别-->
<meta content="email=no" name="format-detection">

写背景图时最好加上top left 或者0 0 不然写运动效果时容易出现跳

禁止复制、选中文本

.el {
  -webkit-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
   user-select: none;
}

苹果手机固定定位有bug 检查html和body是不是设置了overflow-x:hidden;

给不同屏幕大小的手机设置特殊样式

@media only screen  and (min-device-width : 320px)  and (max-device-width : 375px){}

IOS中input键盘事件keyup、keydown、keypress支持不是很好, 用input监听键盘keyup事件,在安卓手机浏览器中是可以的,但是在ios手机浏览器中用输入法输入之后,并未立刻相应keyup事件,只有在通过删除之后才可以响应

方法:可以用html5的oninput事件去代替keyup

<input type="text" id="testInput">
<script type="text/javascript">
  document.getElementById('input').addEventListener('input', function(e){
    var value = e.target.value;
  });
</script>

ios 设置input 按钮样式会被默认样式覆盖

解决方式如下:

input,textarea {
  border: 0;
  -webkit-appearance: none;
}
  • 消除 IE10 里面的那个叉号:input:-ms-clear{display:none;}
  • 手机上的flex布局时会有兼容性问题,只用新版本的会出现安卓手机不识别的现象

flex布局对于低版本的安卓,不支持flex-wrap:wrap属性,但是ios系统支持换行属性,这个时候如何解决呢?当然是不使用换行,用其他方式代替。

.box{
    display: -webkit-box; 
    /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
    display: -moz-box; /* 老版本语法: Firefox (buggy) */
    display: -ms-flexbox; /* 混合版本语法: IE 10 */
    display: -webkit-flex; /* 新版本语法: Chrome 21+ */
    display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
}

input 的placeholder属性会使文本位置偏上

line-height: (和input框的高度一样高)---pc端解决方法

line-height:normal ---移动端解决方法

input type=number之后,pc端出现上下箭头

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0;
}

实现android和ios系统手机打开相机并可选择相册功能

<input class="js_upFile cover1" type="file" name="cover" accept="image/*" capture="camera" multiple/>

$(function () {
    //获取浏览器的userAgent,并转化为小写
    var ua = navigator.userAgent.toLowerCase();
    //判断是否是苹果手机,是则是true
    var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1);
    if (isIos) {
        $("input:file").removeAttr("capture");
    };
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
学做Bootstrap的第一个页面
May 15 HTML / CSS
CSS3中:nth-child和:nth-of-type的区别深入理解
Mar 10 HTML / CSS
一款纯css3实现的鼠标经过按钮特效教程
Nov 09 HTML / CSS
移动端Web页面的CSS3 flex布局快速上手指南
May 31 HTML / CSS
利用css3径向渐变做一张优惠券的示例
Mar 22 HTML / CSS
浅谈HTML5新增及移除的元素
Jun 27 HTML / CSS
canvas基础之图形验证码的示例
Jan 02 HTML / CSS
HTML5使用ApplicationCache接口实现离线缓存技术解决离线难题
Dec 13 HTML / CSS
基于canvas使用贝塞尔曲线平滑拟合折线段的方法
Jan 10 HTML / CSS
高清屏中使用Canvas绘图出现模糊的问题及解决方法
Jun 03 HTML / CSS
HTML速写之Emmet语法规则的实现
Apr 07 HTML / CSS
CSS 使用 resize 实现图片拖拽切换预览功能(强大功能)
Aug 23 HTML / CSS
HTML5中的websocket实现直播功能
May 21 #HTML / CSS
深入浅析HTML5中的article和section的区别
May 15 #HTML / CSS
HTML5触摸事件实现移动端简易进度条的实现方法
May 04 #HTML / CSS
HTML5声音录制/播放功能的实现代码
May 03 #HTML / CSS
HTML5离线应用与客户端存储的实现
May 03 #HTML / CSS
浅谈Html5多线程开发之WebWorkers
May 02 #HTML / CSS
html5的input的required使用中遇到的问题及解决方法
Apr 24 #HTML / CSS
You might like
php颜色转换函数hex-rgb(将十六进制格式转成十进制格式)
2013/09/23 PHP
php 读写json文件及修改json的方法
2018/03/07 PHP
php把字符串指定字符分割成数组的方法
2018/03/12 PHP
JavaScript isArray()函数判断对象类型的种种方法
2010/10/11 Javascript
遨游,飞飞,IE,空中网 浏览器无提示关闭方法
2011/07/11 Javascript
JS函数实现动态添加CSS样式表文件
2012/12/15 Javascript
js中数组排序sort方法的原理分析
2014/11/20 Javascript
javascript解决IE6下hover问题的方法
2015/07/28 Javascript
js+div实现文字滚动和图片切换效果代码
2015/08/27 Javascript
js禁止浏览器的回退事件
2017/04/20 Javascript
获取url中用&amp;隔开的参数实例(分享)
2017/05/28 Javascript
原生JavaScript实现todolist功能
2018/03/02 Javascript
Vue中的循环及修改差值表达式的方法
2019/08/29 Javascript
js实现ajax的用户简单登入功能
2020/06/18 Javascript
python django 访问静态文件出现404或500错误
2017/01/20 Python
解决Python安装后pip不能用的问题
2018/06/12 Python
python集合比较(交集,并集,差集)方法详解
2018/09/13 Python
新年快乐! python实现绚烂的烟花绽放效果
2019/01/30 Python
python过滤中英文标点符号的实例代码
2019/07/15 Python
基于python实现的百度音乐下载器python pyqt改进版(附代码)
2019/08/05 Python
python目标检测给图画框,bbox画到图上并保存案例
2020/03/10 Python
python -v 报错问题的解决方法
2020/09/15 Python
python温度转换华氏温度实现代码
2020/12/06 Python
Python中正则表达式对单个字符,多个字符和匹配边界等使用
2021/01/27 Python
利用CSS3实现文字折纸效果实例代码
2018/07/10 HTML / CSS
捷克体育用品购物网站:D-sport
2017/12/28 全球购物
奥地利网上现代灯具和灯饰店:Lampenwelt.at
2018/01/29 全球购物
Yves Rocher伊夫·黎雪美国官网:法国始创植物美肌1959
2019/01/09 全球购物
日本最大的彩色隐形眼镜销售网站:CharmColor
2020/09/09 全球购物
法学函授自我鉴定
2014/02/06 职场文书
境外导游求职信
2014/02/27 职场文书
吃空饷专项治理工作实施方案
2014/03/04 职场文书
党员公开承诺书和承诺事项
2014/03/25 职场文书
《金子》教学反思
2014/04/13 职场文书
学会掌握自己命运的十条黄金法则:
2019/08/08 职场文书
Python采集爬取京东商品信息和评论并存入MySQL
2022/04/12 Python