android img标签属性_IOS和android兼容性问题分析

最新推荐文章于 2023-03-28 17:36:29 发布

weixin_39571938

最新推荐文章于 2023-03-28 17:36:29 发布

阅读量540

点赞数

文章标签： android img标签属性

本文链接：https://blog.csdn.net/weixin_39571938/article/details/112329708

版权

作者: xteamer成员: shuaiyin

【摘要】今天给大家分享一下自己在实际开发中，所遇到的移动端IOS和android兼容性问题。其实本人在最初开发的时候，很容易忽略的就是IOS的问题，例如：时间格式的显示问题。相信很多初级开发者都会有这样的经历，在IOS手机上，会看到显示NaN的页面。这就是IOS不兼容时间格式问题所导致的。实际开发过程中还有很多的兼容性问题，会一一列举出来。以后有新的关于兼容问题会持续更新。

一.日期的兼容性

1.安卓和ios转换时间戳的形式

关于时间的转换，在安卓系统和ios系统是存在兼容性的，也就是说，在安卓手机可以正常显示的时间，在ios系统上面就会出现NaN。

在安卓系统下，我们可以直接转换：

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

但是在ios系统下，

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

是无法转换成功的，就会出现NaN这样的兼容性问题。

那么解决方案就需要将时间转换成如下的格式，ios系统才可以成功转换，Date.parse(new Date('2018/03/30 12:00:00'))。

如何转换成这种的时间格式：方案如下：

//将xxxx-xx-xx的时间格式，转换为 xxxx/xx/xx的格式 var date = '2018-07-25 19:25'; date = date. ;

封装成函数就是：

function formatTimeStamp (time) { return Date.parse(new Date('2018/03/30 12:00:00')) || Date.parse(new Date('2018-03-30 12:00:00')) }

二.input输入框聚焦

input输入框在聚焦的时候，ios有时候会出现outline或者阴影，安卓则是显示正常的。那么解决方案：

input:focus{outline:none} input:{-webkit-appearance: none;}

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

解决方法：

对于我们的系统框架来说，已经解决这样一个问题。

四.input输入框的placeholder

input输入框的placeholder，也就是输入框的提示性文字。会出现不在输入框的中间位置，导致位置偏上。

那么移动端的解决方案就是：

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

五.input输入框type类型为number的时候

type类型为number也就是说，输入框输入的是数字，但是会出现上下的箭头。可以将箭头给隐藏掉。

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

六.安卓手机可以点击图片

部分的安卓手机可以点击页面的图片，解决方案就是通过css3给img标签设置不可点击属性。

img{ pointer-events: none; }

这样的话img标签的点击事件就会失效。由此可见在很多的js判断，无论移动端还是小程序，都可以通过这个属性，来设置标签的不可点击属性。

七.h5底部输入框被键盘遮挡

在h5的静态页面会出现一个非常难受的问题，就是当页面出现多个input输入框的时候，导致最下面一个输入框，点击的时候弹出的键盘会遮挡输入框。用户根本不知道自己输入的是什么，对用户的体验非常不友好。解决方案：

1.就是选中当前的DOM元素，让他出现在可视区域的顶部或者底部。代码如下：

document.querySelector('#inputId').scrollIntoView();

八.input标签的常用操作

1.清除input标签的默认样式

input { -moz-appearance: none;outline: 0;text-decoration: none; outline: none; border: 0; }

2.input标签属性placeholder样式修改

input::-webkit-input-placeholder { font-size: px2rem(22);color: rgba(136, 136, 136, 1);font-family: Microsoft Yahei; width: px2rem(50); height: px2rem(60); line-height: px2rem(40); }

3.input 点击输入内容后的样式 focus

input:focus { outline: none; -moz-box-shadow: 0 2px 3px 0 rgba(0,0,0,.1) inset, 0 2px 7px 0 rgba(0,0,0,.2); -webkit-box-shadow: 0 2px 3px 0 rgba(0,0,0,.1) inset, 0 2px 7px 0 rgba(0,0,0,.2); box-shadow: 0 2px 3px 0 rgba(0,0,0,.1) inset, 0 2px 7px 0 rgba(0,0,0,.2); }

4.input标签可读不可编辑

方法1: οnfοcus=this.blur() 当鼠标放不上就离开焦点

方法2:readonly

注意： readonly表示此域的值不可修改，仅可与 type="text" 配合使用，可复制，可选择,可以接收焦点，后台会接收到传值

方法3: disabled

readonly="readonly" 推荐

注意： readonly表示此域的值不可修改，仅可与 type="text" 配合使用，可复制，可选择,可以接收焦点，后台会接收到传值

disabled="true" 此果文字会变成灰色，不可编辑，不可点击。

readOnly="true" 文字不会变色，也是不可编辑的，可点击。

css屏蔽输入：<input style="ime-mode: disabled">

有两种方法第一：disabled="disabled"这样定义之后被禁用的 input 元素既不可用，也不可点击。第二：readonly="readonly" 只读字段是不能修改的。不过，用户仍然可以使用 tab 键切换到该字段，还可以选中或拷贝其文本.

今天在实际开发中遇到一类比较特别的关于IOS的时间比较和取舍问题。其实也就是在IOS上，一般后台给到的数据都是年月日，时分秒都具备的。但是前端页面在显示的时候，有时候没有必要那么的具体，可能就要舍弃时分秒。但是同时也要兼容IOS。所以今天给大家介绍一种非常使用的方法：