在前端项目开发中常见的ios与安卓的兼容性问题(代码片段)

水香木鱼 水香木鱼     2023-01-02     789

关键词:

1、日期兼容性

  • 安卓系统下
    Date.parse(new Date(‘2018-03-30 12:00:00’))
    会直接转换成时间戳的形式(简单说就是整数形式)

  • ios系统下
    Date.parse(new Date(‘2018-03-30 12:00:00’))
    sorry,转换不了
    解决办法:

Date.parse(new Date(2018/03/30 12:00:00))

2、input框聚焦,ios出现outline或者阴影,安卓显示正常解决办法:

input:focusoutline:none  //去除外边框
input:-webkit-appearance: none;

3、ios系统,会将数字当成电话号码,导致变色

解决办法:

<meta name="format-detection" content="telephone=no"> 
<meta http-equiv="x-rim-auto-match" content="none">

4、input 的placeholder属性会使文本位置偏上

解决办法:

line-height: (和input框的高度一样高)//pc端解决方法
line-height:normal //移动端解决方法

5、input type=number之后,pc端出现上下箭头

解决办法:

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button 
-webkit-appearance: none !important;
     margin: 0;
 

6、禁止安卓识别email

解决办法:

<meta content="email=no" name="format-detection" />

7、ios 设置input 按钮样式会被默认样式覆盖

解决办法:

input,textarea 
	 border: 0;
  -webkit-appearance: none; 

常见几种浏览器兼容性问题与解决方案

所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况。在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的... 查看详情

常见浏览器兼容性问题与解决方案

所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况。在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统... 查看详情

前端兼容性问题——总览

在Web前端开发中,浏览器兼容性问题是一个常见的挑战。由于不同的浏览器实现了不同的标准和规范,因此相同的代码在不同的浏览器上可能会有不同的表现,或者甚至无法正常工作。前端兼容性问题——总览在Web前端开发中,... 查看详情

常见的兼容性问题解决

所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况。在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的... 查看详情

常见的浏览器兼容问题

所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况。在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的... 查看详情

常见浏览器兼容性问题与解决方案

常见浏览器兼容性问题与解决方案原文:http://blog.csdn.net/chuyuqing/article/details/37561313/所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况。在大多数情况下,我们的需求... 查看详情

在前端工作中遇到的一些常见的兼容问题

1.图片下方3像素:在div中插如图片时,图片会将div下方撑大3px;解决方案:(a)将<div>和<img>写在一行上(IE6、ie7);     (b)将<img>转为块状元素,给<img>添加声明:display:block;     (c)给<div>... 查看详情

前端开发中常见的浏览器兼容性问题及解决方案(代码片段)

...)兼容问题的原因(三)为什么浏览器会存在兼容性问题?(四)处理兼容问题的思路1.要不要做?2.做到什么程度?3.如何做?三,JavaScript兼容问题及解决方案四,CSS兼容问题及其解决方案... 查看详情

五大主流浏览器的内核,前端在ie浏览器中常见的兼容问题

一标题五大主流浏览器及其内核1、Trident代表作:IE元老级内核之一,由微软开发,并于1997年10月首次在ie4.0中使用,凭借其windows垄断优势,Trident市场占有率一直很高。然而垄断并非,没有竞争就没有进步&... 查看详情

零基础学习前端的顺序是啥?

...,需要学习Vue、React、Angular等框架、D3.js、Vue技术栈进行项目开发;掌握React技术栈、Webpack项目构建配置流程、Web项目的部署与发布等等。五、小程序与APP开发:现在移动应用越来越受欢迎,掌握了小程序和APP开发技术可以增强自... 查看详情

移动端:开发技巧(代码片段)

...ticle/details/82663563HTML5标签的使用开发移动端页面时,建议前端工程师使用HTML5,HTML5可以实现一些HTML4中无法实现的丰富的WEB应用程序的体验,减少开发者的工作量块级化a标签由产品意识形态决定,在触控手机上,为提升用户体... 查看详情

前端常见的浏览器兼容性问题及解决方案

常见的兼容性问题:1、不同浏览器的标签默认的外补丁(margin)和内补丁(padding)不同解决方案:css里增加通配符*margin:0;padding:0; 2、IE6双边距问题;在IE6中设置了float,同时又设置margin,就会出现边距问题解决方案:设置display:inline... 查看详情

前端常见问题

...题3.常见web安全漏洞4.哪些操作会造成内存泄漏?5.浏览器兼容性问题以及列举IE与其他浏览器不一样的特性?6.谈谈你对重构的理解7.HTTP状态码8.说说你对MVC和MVVM的理解以及vue和angular区别9.说说你对语义化的理解?10.浏览器渲染... 查看详情

web测试中常见分享问题

...器等考虑不周,同时Android端各类机型碎片化,容易产生兼容性问题,这其中以分享类型为最。  本文简单分析总结一些测试中发现的问题,总结分析。  首先考虑,对于H5页面,分为PC端和移动端,移动端又有iOS与Android。... 查看详情

前端开发常见的兼容性问题及解决方案

参考技术A解决方法:给input增加样式使用这两个样式布局的时候会出现中间有空白的情况解决办法是给他们的父级设置font-size:01.给父级元素设置2.给父级样式设置示例3.添加空div然后给空div设置请参考笔记,奇怪的&&和||当两个值... 查看详情

前端面试题,移动端兼容问题都有哪些,安卓和ios问题?

那么进入正文,不废话,直接把自己了解到的和一些看法说出来。首先是屏幕问题,现在主流的移动设备以安卓和IOS为主,我们在制作移动端页面也是以兼容这两种设备去布局。首先说iPhone,不得不说iPhone的屏幕考虑到了我们开... 查看详情

akjs软件对电脑要求

...于一个丰富的组件化UI框架,优点是开发要前后端分离,项目开发过程中后端通过ajax调用数据的机制。AKjs是一个基于jQuery的一套构建用户界面的前端框架,插件里包含着移动端常用的功能效果以及简单明了的CSS样式库,对IOS和... 查看详情

前端之css常见兼容性问题

1、双倍浮动BUG:描述:块状元素设置了float属性后,又设置了横向的margin值,在IE6下显示的margin值要比设置的值大;解决方案:给float的元素添加display:inline;将其转换为内联元素;2、表单元素行高不一致:解决方案:  ①、给... 查看详情