阅读 1180

CSS H5 移动端ios/Android兼容性技巧

理解一下meta

<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">
复制代码

禁止复制、选中文本

  -webkit-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
   user-select: none;
}
复制代码

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

<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;
}
复制代码

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:normal ---移动端解决方法
复制代码

实现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");
    };
})
复制代码

移动端 HTML5 audio autoplay 失效问题

document.addEventListener('touchstart',function() {
  document.getElementsByTagName('audio')[0].play();
  document.getElementsByTagName('audio')[0].pause();
});
复制代码

针对ios的刘海屏问题的解决:

复制代码

把页面主体内容限定在安全区内

    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: constant(safe-area-inset-left);
    padding-left: env(safe-area-inset-left);
    padding-right: constant(safe-area-inset-right);
    padding-right: env(safe-area-inset-right);
}
复制代码

针对android的刘海屏、水滴屏等问题的解决 在公共样式内定义:

// ios顶部留出20px高度
.havetop {
    .my-header {
        padding-top: 20px;
    }
    .content {
        padding-top: 20px;
    }
}
.isios {
    .my-header {
        padding-top: constant(safe-area-inset-top);
        padding-top: env(safe-area-inset-top);
    }
    .content {
        padding-top: constant(safe-area-inset-top);
        padding-top: env(safe-area-inset-top);
    }
}
<script>
    window.onload = function () {
        document.getElementById('app').classList.add('havetop');
        if (/iPhone/.test(navigator.userAgent)) {
            document.getElementById('app').classList.add('isios');
        }
    }
</script>
复制代码

注:具体使用的页面头部(.my-header)是非定位,主体部分(.content)是absolute定位,如图所示:

20200903181610776.png

可能会出现的问题:部分状态栏高的安卓机型,头部会有部分的遮盖,在这里可以用上面的judgeBigScreen这个方法判断一下是否是android的全面屏,如果是全面屏的话给头部和主体部分的padding值适当增加:

    //判断屏幕是否为全面屏
    function judgeBigScreen() {
        //这里根据返回值 true 或false ,返回true的话 则为全面屏
        var result = false;
        var rate = window.screen.height / window.screen.width;
        var limit = window.screen.height == window.screen.availHeight ? 1.8 : 1.65; // 临界判断值
        // window.screen.height为屏幕高度
        //  window.screen.availHeight 为浏览器 可用高度
        if (rate > limit) {
            result = true;
        }
        return result;
    }
    window.onload = function () {
       document.getElementById('app').classList.add('havetop');
        if (/iPhone/.test(navigator.userAgent)) {
            document.getElementById('app').classList.add('isios');
        } else {
            //全面屏
            let judgeFullScreen = judgeBigScreen();
            if (judgeFullScreen) {
                document.getElementById('app').classList.add('isFullScreen');
            }
        }
    }
</script>
.isFullScreen {
    .my-header {
        padding-top: 30px;
        padding-top: 30px;
    }
    .content {
        padding-top: 30px;
        padding-top: 30px;
    }
}
复制代码

效果如下图所示:

20200904135513337.jpeg

文章分类
前端
文章标签