精华内容
下载资源
问答
  • 移动端兼容性问题

    2018-07-10 15:30:27
    简单记录一下平时遇到的兼容性问题: 1.ios8及以下不支持flex布局 解决:safari使用webkit内核,在相关属性上加webkit兼容。 display: flex; display: -webkit-flex; justify-content: center; -webkit-...

    简单记录一下平时遇到的兼容性问题:

    1.ios8及以下不支持flex布局

    解决:safari使用webkit内核,在相关属性上加webkit兼容。

    display: flex;

    display: -webkit-flex;

    justify-content: center;

    -webkit-justify-content: center;

    align-items:center;

    -webkit-align-items: center;

    ...

     

    2.ios11使用fixed布局时,input光标位置消失或错位

    解决:将弹出框使用absolute,其父元素使用relative布局。

    其他移动端fixed兼容问题解决方案

    展开全文
  • 移动端兼容性问题解决方案

    移动端兼容性问题解决方案

    参考文章:

    (1)移动端兼容性问题解决方案

    (2)https://www.cnblogs.com/wangpenghui522/p/5398137.html


    备忘一下。


    展开全文
  • 移动端兼容性问题通常是我们作为前端最头疼的事情,尤其是在工作中要适配不同的android手机和不同的ios手机,要适应不同的屏幕大小,根据我长时间工作经验,我个人认为遇到移动端兼容性问题可以根据以下几点建议...

    快速解决移动端兼容性问题

    • 移动端兼容性问题通常是我们作为前端最头疼的事情,尤其是在工作中要适配不同的android手机和不同的ios手机,要适应不同的屏幕大小,根据我长时间工作经验,我个人认为遇到移动端兼容性问题可以根据以下几点建议快速解决问题

    1.快速确定影响因素

    • 也就是说,当有测试跟你说测试出的问题时,你需要问清除是所有手机有这样的问题还是部分手机有这样的问题,并且一定要自己拿着测试机复现这个问题,在确定了解问题的基础上,然后排查问题出现的原因,是UI组件影响的还是某个元素影响的或者是某部分js影响的。对于前端来说,找到问题所在应该并不是什么难事

    2.找到原因对症下药

    • 找到问题所在后,我们需要的是能尽快处理解决这个问题,对于现在很多移动端项目都会用UI组件去布局,但UI组件往往存在很多兼容性问题,如果这个问题是由UI组件的css、js或html引起的,首先在网络上查找这一问题的解决方案,如果没有好的解决方案或网络上的解决方案存在各种各样的问题,那么我建议最好重新布局,用原生的html、css和js来达到这个效果,不要老盯着这个问题非得通过这个UI组件找到解决办法,这样容易浪费时间问题还解决不掉。如果不是UI组件布局引起的问题,js的兼容性问题网络上一般都会有相应的兼容性解决方案,css、html问题通常更改css样式应该就可以解决
    展开全文
  • react 移动端 兼容性问题和一些小细节 使用 ES6 的浏览器兼容性问题 react 对低版本的安卓webview 兼容性 iOS下 fixed与软键盘的问题 onClick 阻止冒泡 meta对于移动端的一些特殊属性 页面禁止复制、选中文本 1....

    react 移动端 兼容性问题和一些小细节

    • 使用 ES6 的浏览器兼容性问题
    • react 对低版本的安卓webview 兼容性
    • iOS下 fixed与软键盘的问题
    • onClick 阻止冒泡
    • meta对于移动端的一些特殊属性
    • 页面禁止复制、选中文本

    1.使用 ES6 的浏览器兼容性问题

     由于 Babel 默认只转换转各种 ES2015 语法,而不转换新的 API,比如 Promise,以及 Object.assign、Array.from 这些新方法,这时我们需要提供一些 ployfill 来模拟出这样一个提供原生支持功能的浏览器环境。
     主要有两种方式:babel-runtime 和 babel-polyfill。
    
     A.babel-runtime
     1.babel-runtime 的作用是模拟 ES2015 环境,包含各种分散的 polyfill 模块,我们可以在自己的模块里单独引入,比如 promise:
     

    图片描述

    
      2.它们不会在全局环境添加未实现的方法,只是这样手动引用每个 polyfill 会非常低效,我们可以借助 Runtime transform 插件来自动化处理这一切。
      首先使用 npm 安装

    图片描述

    
      3.然后在 webpack 配置文件的 babel-loader 增加选项:

    图片描述

    B.babel-polyfill

     而 babel-polyfill 是针对全局环境的,引入它浏览器就好像具备了规范里定义的完整的特性,一旦引入,就会跑一个 babel-polyfill 实例。用法如下:
     1.安装 babel-polyfill

    图片描述

    
     2.在入口文件中引用:

    图片描述
    其实做到这些,在大部分浏览器就可以正常跑了,

    2.react 对低版本的安卓webview 兼容性

    A.android较低版本webview不支持Object.assign改用var objectAssign = require('object-assign’)  这种情况上面方案可以解决
    B.import React from 'react';import ReactDOM from 'react-dom';//不可放在其他模块引入的后面,否则android5.0及以下版本webview报错
    

    3.iOS下 fixed与软键盘的问题

     fixed失效是由于软键盘唤起后,页面的 fixed 元素将失效(ios认为用户更希望的是元素随着滚动而移动,也就是变成了 absolute 定位),
     既然变成了absolute,所以当页面超过一屏且滚动时,失效的 fixed 元素就会跟随滚动了。解决方案就是让整个页面处于一屏高度就能解决问题的根本
     <body> 
        <div class='warper'> 
            <div class='top'></div> 
            <div class='main'></div> 
        <div> 
        <div class="fix-bottom">
        </div> 
    </body>
    
    样式:
    warper{ 
        position: absolute; 
        width: 100%; 
        left: 0; 
        right: 0; 
        top: 0; 
        bottom: 0; 
        overflow-y: scroll; 
        -webkit-overflow-scrolling: touch;/* 解决ios滑动不流畅问题 */ }
    .fix-bottom{
        position:fixed;
        bottom:0;
        width: 100%;
    }
    
    
    

    4.onClick 阻止冒泡
    阻止冒泡事件分三种情况

    A、阻止合成事件间的冒泡,用e.stopPropagation();

    图片描述

    B、阻止原生事件与最外层document上的事件间的冒泡,用e.nativeEvent.stopImmediatePropagation();

    图片描述

    C、阻止合成事件与除最外层document上的原生事件上的冒泡,通过判断e.target来避免

    图片描述

    5.meta对于移动端的一些特殊属性

    <!--主要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">

    6.页面禁止复制、选中文本

    -webkit-user-select: none;
     -moz-user-select: none;
     -khtml-user-select: none;
      user-select: none;
    
    展开全文
  • 浅谈实际中遇到的某些css属性在移动端兼容性问题 w3cSchool中的css属性里对各种浏览器内核版本有相对比较详细的介绍,但是实际开发过程中,很多人应该不会真正关心是否支持,只有在测试的过程中,发现某些属性不支持...
  • 常见移动端兼容性问题

    千次阅读 2019-07-31 15:15:00
    1.IOS移动端click事件300ms的延迟相应 移动设备上的web网页是有300ms延迟的,往往会造成按钮点击延迟甚至是点击失效。 这是由于区分单机事件和双击屏幕缩放的历史原因造成的。 解决方式: fastclick可以解决在...
  • 移动端兼容性问题总结

    千次阅读 2018-07-20 16:15:01
    1.iOS (iPhone和iPad)的点击闪屏问题 原因:在ios上,当点击一个链接或者通过js绑定了点击事件的元素时,会出现一个半透明的背景,当手指离开屏幕,该灰色背景消失,出现“闪屏”; 解决方法: 方法一:将半透明...
  • 如何CSS-画0.5px的线,解决IOS移动端兼容性问题## ** 设计师在做设计图的时候都是以iphone6(宽为750物理像素)为基准进行设计的。iphone6的设备像素比(即css像素与物理像素的比例)是2,所以设计师在设计图画了...
  • .box{ display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */ display: -moz-box; /* 老版本语法: Firefox (buggy) */ display: -ms-flexbox; /* 混合版本语法: IE 10...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 33,158
精华内容 13,263
关键字:

移动端兼容性问题