浅谈Html5挪动端ios/Android适配性总结

2021-02-23 08:34 jianzhan

之前做pc端，也会遇到适配性的难题，但是说真话，脑海里都是ie的难题，并沒有甚么可非常留意的，将会是我不当总结，如今做挪动端（原本感觉挪动端很easy，因此没放在眼中），so，我错了，我为自身的忽视傲慢买单！

近期就遇见了1些适配性bug，从在网上找了材料。

先说1下viewport

先上模版

<meta charset="utf⑻">
<!--关键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">
<!--严禁数据全自动鉴别为电話号码，这个较为有效，由于1串数据在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;
}

iPhone手机上固定不动精准定位有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框的高宽比1样高）---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();
    //分辨是不是是iPhone手机上，是则是true
    var isIos = (ua.indexOf('iphone') != ⑴) || (ua.indexOf('ipad') != ⑴);
    if (isIos) {
        $("input:file").removeAttr("capture");
    };
})

以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。

浅谈Html5挪动端ios/Android适配性总结

为您推荐