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

前端之家收集整理的这篇文章主要介绍了浅谈Html5移动端ios/Android兼容性总结前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

先说一下viewport

先上模板










@H_403_19@

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

禁止复制、选中文

403_19@

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

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

403_19@

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

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


document.getElementById('input').addEventListener('input', function(e){
var value = e.target.value;
});
@H_403_19@

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

解决方式如下:

403_19@

消除 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+ */
}@H_403_19@

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

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

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

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

403_19@

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

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

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

猜你在找的HTML5相关文章