移动端开发的兼容问题

838 阅读4分钟

1. button高亮显示问题

问题:

点击置灰状态的button按钮,按钮会闪一下蓝色,这和我原本的样式冲突。在此之前已经清除了outline:none,:active伪类元素等造成的影响,那么为什么还是会有这种现象。

我们在做移动端开发的时候忽略了一个鲜为人知的属性。 -webkit-tap-highlight-color。它的功能是移动端点击时的背景设置。这个属性只适用于ios。当我们点击button时,它会高亮显示。outline:none在移动端这时是不起作用的,想要去除文本框的默认样式使用的是-webkit-appearance,在iOS上加上这个属性才能给按钮和输入框自定义样式,聚焦时取消默认样式是-webkit-tap-highlight-color。

解决方案:

在这个元素上面加上 -webkit-tap-highlight-color:transparent; -webkit-appearance: none; 就可以解决上面这个问题了。

补充:

-webkit-user-select: none; // 禁止页面文字选择 ,此属性不继承,一般加在body上规定整个body的文字都不会自动调整。但是它会导致input/textarea输入框无法输入,我们写的时候要注意。

-webkit-touch-callout:none; 禁用长按页面时的弹出菜单(iOS下有效) ,取消了放大镜?效果。但是注意的是在企业微信里面这个是不起作用的,长按依旧会有放大镜效果。

2. ios字体问题

问题

对于手机上的字体来说,我们不能控制。我们主要针对字体修改的就是:衬线与非衬线、顺滑设置。

3. 多行文本溢出失效

问题

正常情况下,我们默认最多显示三行文字,代码如下所示。但是我们在审查元素的时候发现-webkit-box-orient: vertical;失效。

解决方案:

这是由于webpack打包时,optimize-css-assets-webpack-plugin这个插件造成的。注释掉webpack.prod.conf.js中下面的代码就可以了。

4. ES6新特性:symbol类型造成的问题

问题

在项目中,我需要删除数组中的某个元素,代码如下。

解决方案 使用splice方法,遍历重新拿到tag数组,然后赋给tag

6.长时间按住页面出现闪退

element {undefined

  -webkit-touch-callout:none;

}

7.iphone及ipad下输入框默认内阴影

Element{undefined

  -webkit-appearance:none;

}

8.旋转屏幕时,字体大小调整的问题

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6{undefined

  -webkit-text-size-adjust:100%;

}

9.圆角bug

某些Android手机圆角失效

background-clip: padding-box;

10.设置缓存

<meta http-equiv="Cache-Control"content="no-cache"/>

手机页面通常在第一次加载后会进行缓存,然后每次刷新会使用缓存而不是去重新向服务器发送请求。如果不希望使用缓存可以设置no-cache。

移动端点击300ms延迟

300ms尚可接受,不过因为300ms产生的问题,我们必须要解决。300ms导致用户体验并不是很好,解决这个问题,我们一般在移动端用tap事件来取代click事件。

推荐两个js,一个是fastclick,一个是tap.js

关于300ms延迟,具体请看:thx.github.io/mobile/300m…

ios和android下触摸元素时出现半透明灰色遮罩

Element {undefined

  -webkit-tap-highlight-color:rgba(255,255,255,0)

}

设置alpha值为0就可以去除半透明灰色遮罩,备注:transparent的属性值在android下无效。

后面一篇文章有详细介绍,地址:www.jb51.net/post/phone_…

桌面图标

iOS下针对不同设备定义不同的桌面图标。如果不定义则以当前屏幕截图作为图标。

上面的写法可能大家会觉得会有默认光泽,下面这种设置方法可以去掉光泽效果,还原设计图的效果!

  <link rel="apple-touch-icon-precomposed"href="touch-icon-iphone.png"/>

图片尺寸可以设定为5757(px)或者Retina可以定为114114(px),ipad尺寸为72*72(px)

启动画面

iOS下页面启动加载时显示的画面图片,避免加载时的白屏。

可以通过madia来指定不同的大小:

IOS中input键盘事件keyup、keydown、keypress支持不是很好

问题是这样的,用input search做模糊搜索的时候,在键盘里面输入关键词,会通过ajax后台查询,然后返回数据,然后再对返回的数据进行关键词标红。用input监听键盘keyup事件,在安卓手机浏览器中是可以的,但是在ios手机浏览器中变红很慢,用输入法输入之后,并未立刻相应keyup事件,只有在通过删除之后才能相应!

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

解决方式如下:

input,

textarea {undefined

  border: 0;

  -webkit-appearance: none;

}

设置默认样式为none

解决办法:

可以用html5的oninput事件去代替keyup

<input type="text"id="testInput">