移动开发兼容问题

wangshijun 发布于2019-08-30 11:23 / 2265人阅读

摘要：安卓使用绝对定位布局与原生有冲突如果绝对定位的元素在最下面，键盘弹起时，绝对定位元素会在键盘上面解决办法使用布局实现，有一个可使用或者监听事件，将元素隐藏低版本浏览器，给设置之后，将兄弟元素挤出了父元素空间具体原因待查，反正需要给加一个验

1.安卓使用绝对定位布局与原生input有冲突

如果绝对定位的元素在最下面，键盘弹起时，绝对定位元素会在键盘上面

解决办法：

使用flex布局实现，有一个flex-shrink可使用

或者监听resize事件，将元素隐藏

export function adapterPosition(selector) {
    if (/iphone/i.test(navigator.userAgent)) return
    const h = window.innerHeight;
    const dom = document.querySelector(selector)
    if (!dom) return
    const display = dom.style.display
    window.addEventListener("resize", () => {
        const height = window.innerHeight
        if (height < h) {
            dom.style.display = "none"
        } else {
            dom.style.display = display
        }
    });
}

2.低版本浏览器，给input设置flex:1之后，将兄弟元素挤出了父元素空间

具体原因待查，反正需要给input加一个display:block


    验证码

.item {
    margin-left: 15px;
    box-sizing: border-box;
    height: 60px;
    padding: 12px 15px 12px 0;
    overflow: hidden;
    background-color: #fff;
    color: #212121;
    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    border-bottom: 1px solid #f4f4f4;
    font-size: 16px;
}

.item .name {
    margin-right: 10px;
    min-width: 48px;
}

.item .input {
    display: block; // 需要加一个display：block
    outline: 0 none;
    -webkit-box-flex: 1;
    flex: 1;
    font-size: 16px;
    padding: 0;
    border-width: 0;
    box-shadow: none;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

3.relative top失效

关于relative元素top属性失效的原因，父元素没有设置高度，子元素top使用百分比的时候没有参照，此时可以使用px值

4.滚动穿透问题

描述：有场景需要mask，但是背景还是可以滚动，即滚动穿透，解决方案如下，主要是获取页面的滚动元素并设置其为fixed

body.no-scroll {
  position: fixed;
  width: 100%;
}

UtilFn.ModalHelper = function (bodyCls) {
    var scrollTop;
    var scrollingElement = document.scrollingElement || document.body; // 此写法兼容webkit，获取页面滚动元素
    return {
        afterOpen: function () {
            scrollTop = scrollingElement.scrollTop;
            document.body.classList.add(bodyCls);
            document.body.style.top = -scrollTop + "px";
        },
        beforeClose: function () {
            document.body.classList.remove(bodyCls);
            scrollingElement.scrollTop = scrollTop;
        }
    };
}

5.浏览器对像素四舍五入的问题

参考 http://web.jobbole.com/84113/

浏览器会对小数点进行四舍五入，实际渲染是四舍五入之后的，但是真实占用空间是原始大小，四舍五入的那部分值会影响下一个

GPU云服务器云服务器兼容问题兼容性问题 Js的兼容问题 html图片兼容问题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114963.html

移动端开发的兼容问题

摘要：移动端开发的兼容问题文章已同步我的笔记，欢迎大家加，加后人生更加美好下为属性设置会出现样式文字和背景异常问题。解决方案可以使用整体放大屏幕的倍等等再使用缩放使用在移动端会模糊也需要这样的解决方案在移动端图片上传图片兼容低端机的问题。移动端开发的兼容问题文章已同步我的github笔记https://github.com/ymblog/blog，欢迎大家加star~~，加star后人生...

wyk1184 2019-08-20 17:28 评论0 收藏0
移动端开发的兼容问题

摘要：移动端开发的兼容问题文章已同步我的笔记，欢迎大家加，加后人生更加美好下为属性设置会出现样式文字和背景异常问题。解决方案可以使用整体放大屏幕的倍等等再使用缩放使用在移动端会模糊也需要这样的解决方案在移动端图片上传图片兼容低端机的问题。移动端开发的兼容问题文章已同步我的github笔记https://github.com/ymblog/blog，欢迎大家加star~~，加star后人生...

weakish 2019-08-29 12:48 评论0 收藏0
移动端开发的兼容问题

摘要：移动端开发的兼容问题文章已同步我的笔记，欢迎大家加，加后人生更加美好下为属性设置会出现样式文字和背景异常问题。解决方案可以使用整体放大屏幕的倍等等再使用缩放使用在移动端会模糊也需要这样的解决方案在移动端图片上传图片兼容低端机的问题。移动端开发的兼容问题文章已同步我的github笔记https://github.com/ymblog/blog，欢迎大家加star~~，加star后人生...

songjz 2019-08-01 17:01 评论0 收藏0
Mac联机调试移动端页面方法和移动端IOS遇到的兼容性问题

摘要：移动端失效需求点击一个，让某一个聚焦并弹出虚拟键盘。安卓可以聚焦，但是不会弹出虚拟键盘说明安卓机的表现也是异常的无法聚焦，也不会弹出虚拟键盘所以我的这边的实践结论是，如果希望在页面初始化过程中，让自动聚焦并弹出虚拟键盘。移动端IOS遇到的兼容性问题和 Mac联机调试方法有时候遇到一些移动端「疑难杂症」，因为移动端不方便调试，可能找不到问题点，所以经常需要电脑端和移动端联机调试，...

CoreDump 2019-08-23 13:46 评论0 收藏0
从零搭建移动H5开发项目实战

摘要：并且除了常用的端，还要考虑微信端，或者是端。所以我们要有一套机制，在端上走的代码，在端或者微信端上走端对应的代码。对于一个从零开始的移动端项目，我总结了以上这些移动开发难点，希望之后的人能少踩点坑，站在我的肩膀上提高项目开发的效率和质量。从零搭建移动H5开发项目实战前端H5的前世今身在Pc的时代，前端技术无疑统治了大多数用户的交互界面！而在移动为王的今天，NA开发在早期占领了大多...

terro 2019-08-29 11:32 评论0 收藏0