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. spring boot:用redis+redisson实现分布式锁(redisson3.11.1/spring boot 2.2)

    一,为什么要使用分布式锁? 如果在并发时锁定代码的执行,java中用synchronized锁保证了线程的原子性和可见性 但java锁只在单机上有效,如果是多台服务器上的并发访问,则需要使用分布式锁, ...

  2. php 注册器模式 工厂模式

    <?php /** * 注册器模式 * 全局共享和交换对象 */ class Register { public static $objects; // 定义全局数组 // 保存对象到全局数组 ...

  3. jdk、eclipse和idea安装

    一.jdk下载与环境配置与IDEA 下载地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-213315 ...

  4. SQL 禁止在 .NET Framework 中执行用户代码。启用 "clr enabled" 配置选项

    注:本文摘自:http://blog.csdn.net/heshengfen123/article/details/3597125 在执行SQL脚本过程中如果出现 禁止在 .NET Framework ...

  5. 基于Spring读写分离

    为什么是基于Spring的呢,因为实现方案基于Spring的事务以及AbstractRoutingDataSource(spring中的一个基础类,可以在其中放多个数据源,然后根据一些规则来确定当前需 ...

  6. vue路由传参及组件传参和组件方法调用

    VUE路由和组件传参 第一种vue自带的路由传参的三种基本方式 1.通过name :id传参 子组件通过$route.name接收参数 { path: '/particulars/:id', name ...

  7. 直接理解转置卷积（Transposed convolution）的各种情况

    使用GAN生成图像必不可少的层就是上采样,其中最常用的就是转置卷积(Transposed Convolution).如果把卷积操作转换为矩阵乘法的形式,转置卷积实际上就是将其中的矩阵进行转置,从而产生 ...

  8. JWT实现过程及应用

    jwt实现过程 # 用户登录,返回给客户端token(服务端不保存),用户带着token,服务端拿到token再校验; 1,提交用户名和密码给服务端,如果登陆成功,jwt会创建一个token,并返回; ...

  9. RestfulApi 学习笔记——简单介绍（一）

    前言 什么是restapi? 直接看:http://www.ruanyifeng.com/blog/2014/05/restful_api.html 阮一峰的blog,即可明白,下面是一些例子,增强理 ...

  10. TypeScript魔法堂：函数类型声明其实很复杂

    前言 江湖有传"动态类型一时爽,代码重构火葬场",由于动态类型语言在开发时不受数据类型的约束,因此非常适合在项目原型阶段和初期进行快速迭代开发使用,这意味着项目未来将通过重写而非重 ...