2.input框聚焦，ios出现outline或者阴影，安卓显示正常

  • 解决方法
input:focus{outline:none}

input:{-webkit-appearance: none;}

3.关于flex布局

  • 解决方法

    flex布局对于低版本的安卓，不支持flex-wrap:wrap属性，但是ios系统支持换行属性，这个时候如何解决呢？当然是不使用换行啦。

    如果你的布局必须要用到换行，那就在外层包裹一个大的div，然后设置几个小div，每个小div的布局都是flex（但是不换行哦）；（希望你能理解我的意思，如果不理解，可以在下方留言，我会实时做出解答）

4.ios系统，会将数字当成电话号码，导致变色

  • 解决方法
<meta name="format-detection" content="telephone=no">

<meta http-equiv="x-rim-auto-match" content="none">

将上面的代码加入到<head>标签中

5.禁止安卓识别email

  • 解决方法
<meta content="email=no" name="format-detection" />

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

  • 解决方法
line-height: （和input框的高度一样高）---pc端解决方法

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

7.input type=number之后，pc端出现上下箭头

input::-webkit-outer-spin-button,

input::-webkit-inner-spin-button {

    -webkit-appearance: none !important;

    margin: 0;

}

作者：一个写前端的姑娘

ios、安卓前端兼容性1的更多相关文章

  1. ios、安卓前端兼容性

    1.日期兼容性 解决方法(请看我上一篇文章)安卓.ios时间转换成时间戳的形式 2.input框聚焦,ios出现outline或者阴影,安卓显示正常 解决方法 input:focus{outline: ...

  2. Web前端兼容性指南

    一.Web前端兼容性问题 一直以来,Web前端领域最大的问题就是兼容性问题,没有之一. 前端兼容性问题分三类: 浏览器兼容性 屏幕分辨率兼容性 跨平台兼容性 1.浏览器兼容性问题 第一次浏览器大战发生 ...

  3. H5和PC实现点击复制当前文字的功能，兼容ios,安卓

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. WPF C#仿ios 安卓 红点消息提示

    原文:WPF C#仿ios 安卓 红点消息提示 先把效果贴出来,大家看看. 代码下载地址: http://download.csdn.net/detail/candyvoice/9730751 点击+ ...

  5. 让微信内置浏览器兼容clipboard.js 复制粘贴 ios 安卓

    <!--js copy事件--><script type="text/javascript" src="/static/js/clipboard.min ...

  6. 【原】移动web资源整理(安卓、ios移动端兼容性问题归整)

     meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-wi ...

  7. ios、安卓的兼容性

    日期转换成时间戳: 安卓下可以使用 Date.parse(new Date('2019-11-18 12:00:00')) 直接转换,结果为 1574049600000 ios下 Date.parse ...

  8. 移动前端兼容性笔记 - 安卓2.x 自带原生浏览器箭头问题

    这样的箭头用CSS-3实现,整段代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  9. 使用axios对安卓或者ios低版本兼容性处理

    原因:不支持ES6,无法使用promise 解决办法: 1.安装 es6-promise cnpm install es6-promise --save-dev 2.引入 es6-promise im ...

随机推荐

  1. 503. 下一个更大元素 II

    503. 下一个更大元素 II 给定一个循环数组(最后一个元素的下一个元素是数组的第一个元素),输出每个元素的下一个更大元素.数字 x 的下一个更大的元素是按数组遍历顺序,这个数字之后的第一个比它更大 ...

  2. Stream（四）

    public class Test { /* * 创建:一步 * 中间:0~n步 * 终结:一步 * * 三.终结操作 * 1.void forEach(Consumer ):遍历流中的数据 * 2. ...

  3. JUC---11单例模式

    一.什么是单例模式 单例模式(Singleton Pattern)是 Java 中最简单的设计模式之一.这种类型的设计模式属于创建型模式,它提供了一种创建对象的最佳方式.这种模式涉及到一个单一的类,该 ...

  4. router-view组件在app.vue中渲染不出来怎么办

    1.在app.vue使用router-view组件直接渲染 页面什么都没显示,可能问题出在路由配置上了,检查路由是否配置完好,路由挂载那里必须使用routes属性 2.在app.vue中router- ...

  5. Luogu P4280 [AHOI2008]逆序对

    题目描述 甩个链接就走 题解 先预处理出每个位置上分别填上 1~k 的数的逆序对的数量的前缀和与后缀和 (不用管原来有值的,统计时不计入答案就行了) (有点绕,看代码应该能懂) 然后枚举每个 -1 的 ...

  6. 怎么购买合适的4G DTU

    4G DTU指的是采用FDD-LTE或者TD-LTE的4G网络实现将是本地串口数据进行无线长距离数据传输,和远程公网服务器进行数据交互,主要用于远程数据采集和远程控制项目.在购买之前,也要对4G DT ...

  7. Java学习的第四十一天

    1.例4.4内置函数 public class cjava { public static void main(String[] args) { int i=10,j=20,k=30,m; m=max ...

  8. JWT原理

    1.COOKIE使用和优缺点 https://www.cnblogs.com/xiaonq/p/11094480.html   1.1 cookie原理: 用户名+密码 cookie是保存在用户浏览器 ...

  9. php的三元运算符

    简单记录一哈php的三元运算符的用法:    啥子是三元运算,即第一个表达式作为判断条件,在后面两个表达式中选择一个执行. 若判断成立,则执行第二个表达式,否则执行第三个表达式. 看到好多网友都说的不 ...

  10. [Luogu P2341] [HAOI2006]受欢迎的牛 (缩点+bitset)

    题面 传送门:https://www.luogu.org/problemnew/show/P2341 Solution 前排提示,本蒟蒻做法既奇葩又麻烦 我们先可以把题目转换一下. 可以把一头牛喜欢另 ...