苹果版下载够力排列5:www.xy5um.com.cn - 路饭网

搜索: 您的位置排列5 > 网络频道 > 阅读资讯:HTMl5移动端ios和Android兼容性介绍

HTMl5移动端ios和Android兼容性介绍

2018-06-19 08:41:36 来源:排列5 www.xy5um.com.cn 【

排列5 www.xy5um.com.cn HTMl5移动端ios和Android兼容性介绍

以前做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");
  };
})

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

 

本文地址://www.xy5um.com.cn/a/question/98875.html
Tags: HTML5 浅谈 移动
编辑:路饭网
关于我们 | 联系我们 | 友情链接 | 网站地图 | Sitemap | 排列5 | 返回顶部
  • 拜博口腔医疗集团创始人、董事长黎昌仁获第十二届人民企业社会责任奖年度人物奖 2019-02-21
  • 动漫微视频:春天里的叮嘱与承诺 2019-02-21
  • 成都一男子连撞3人 危害公共安全被刑拘 2019-02-21
  • 高考阅卷宽容瑕疵 成绩6月23日发布 压轴大题已有20余个满分 2019-02-21
  • “龙舟水”今起送清凉 安徽局地降雨量或达150毫米 2019-02-20
  • 好事要支持,解决劳动力更是好事 2019-02-20
  • 七成网购纠纷来自这两大平台,最易出问题的商品是…… 2019-02-20
  • 权威!个税起征点提至每月5000元,财政部最新解释来了 2019-02-20
  • 呵呵。。。你这是没有耐力和极不对称的高手。真正的高手过招会有很多的精彩回合。 2019-02-19
  • “黔电送粤”配套大型煤矿项目获批 盘江股份控股 2019-02-19
  • Le calendrier deux sessions de Xi Jinping 2019-02-19
  • QS世界大学排名发布:中国11所大学进百强,清华排名创历史 2019-02-19
  • ECCO2016春夏流行趋势一览 让你的春天炫出彩虹 2019-02-18
  • 新疆旅游系列活动亮相旅博会 特色产品成焦点--旅游频道 2019-02-18
  • 互联网资产管理须持牌经营 2019-02-18
  • 120| 904| 173| 388| 886| 395| 829| 922| 460| 182|