移动端兼容性及常见问题

移动端开发兼容性

及常见问题汇总

1.设置placeholder字体颜色 (4)

问题描述 (4)

解决办法 (4)

2.移动端高亮 (5)

问题描述 (5)

解决办法 (5)

3.a与input嵌套无鼠标无手型效果 (5)

问题描述 (5)

解决办法 (5)

4.Input框获得焦点时有蓝色外框线 (6)

问题描述 (6)

解决办法 (6)

5.IOS下按钮等默认样式 (6)

问题描述 (6)

解决办法 (6)

6.通过媒体查询进行屏幕适配 (6)

问题描述 (6)

解决办法 (6)

7.弹性盒子布局 (7)

问题描述 (7)

解决办法 (7)

8.竖屏转横屏文字变大 (8)

问题描述 (8)

解决办法 (8)

9.盒子边框溢出 (9)

问题描述 (9)

解决办法 (9)

10.IOS长按链接弹出对话框 (9)

问题描述 (9)

解决办法 (9)

11.placeholder中的文字不垂直居中 (9)

问题描述 (9)

解决办法 (10)

12.Ios数字颜色样式超过9位后失控 (10)

问题描述 (10)

解决办法 (11)

13.Img定位3px问题 (11)

问题描述 (11)

解决办法 (11)

14.问题 (12)

问题描述 (12)

解决办法 (12)

15.问题 ....................................................................................................... 错误!未定义书签。

问题描述....................................................................................................错误!未定义书签。

解决办法....................................................................................................错误!未定义书签。

16.问题 ....................................................................................................... 错误!未定义书签。

问题描述....................................................................................................错误!未定义书签。

解决办法....................................................................................................错误!未定义书签。

17.问题 ....................................................................................................... 错误!未定义书签。

问题描述....................................................................................................错误!未定义书签。

解决办法....................................................................................................错误!未定义书签。

1.移动端事件

问题描述

解决办法

2.字体单位

问题描述

字体单位设置

解决办法

Body{

Font:62.5%/150%;

}

字体单位采用rem

3.设置placeholder字体颜色

问题描述

PC端plcaeholder可以通过修改input的color属性来改变颜色，但手机端无效果在手机端Form中placeholder字体有默认颜色

解决办法

input::-webkit-input-placeholder{

color: #D7F2EB;

}

input:-ms-input-placeholder{

color: #D7F2EB;

}

input::-moz-placeholder{

color: #D7F2EB;

}

4.移动端高亮

问题描述

移动端点击input等元素点击时会出现蓝色高亮背景

解决办法

body{

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

}

5.a与input嵌套无鼠标无手型效果问题描述

注：此问题为PC端问题

布局结构如下：

则input盖住a，导致鼠标移到a上无手型指针

解决办法

input[type="button"]{

cursor:pointer;

}