移动端兼容性及常见问题.docx

移动端兼容性及常见问题.docx

《移动端兼容性及常见问题.docx》由会员分享，可在线阅读，更多相关《移动端兼容性及常见问题.docx（11页珍藏版）》请在冰点文库上搜索。

移动端兼容性及常见问题

移动端开发兼容性

及常见问题汇总

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;

}

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

问题描述

Input会有默认蓝色外框线

解决办法

input{

outline:

 none;

}

7.IOS下按钮等默认样式

问题描述

IOS下的按钮会自动加圆角，加颜色渐变，搜索类型按钮会自动加圆角

解决办法

input{

-webkit-appearance:

 none;

}

8.通过媒体查询进行屏幕适配

问题描述

移动开发面对的屏幕尺寸那叫一个丰富，其中安卓阵营就够让人头痛的。

解决办法

9.弹性盒子布局

问题描述

完成如下效果，形成多列布局，并且多屏幕适配

解决办法

使用盒子布局

父元素：

display:

-webkit-box

子元素：

-webkit-box-flex:

1

10.竖屏转横屏文字变大

问题描述

当竖屏的屏的时候显示效果不错，但是当横屏的时候，字体会变大，无论你怎么设置字体大小都无效

解决办法

禁止自动调整

-webkit-text-size-adjust:

none

11.盒子边框溢出

问题描述

当我们指定了一个块级元素时，并且为其定义了边框，设置了其宽度为100％。

按照盒子模型，就会发现该元素的左右边框各1个像素会溢了，导致出现横向滚动条

解决办法

指定盒子的大小包括边框的宽度

-webkit-box-sizing:

border-box

12.IOS长按链接弹出对话框

问题描述

在项目开发中，有时我们需要某个链接在当前页面打开，这样需要禁止用户在新窗口打开页面，我们可以使用a标签的target=”_self”指定在当前页面打开，但是在iOS中长按链接一段时间后，系统会弹出一个对话框，用户可以通过点击”在新页面中打开”来在新窗口打开页面，这样我们指定的target属性就失效了

解决办法

可以通过指定当前元素的-webkit-touch-callout属性为none来禁止iOS弹出这些按钮

13.placeholder中的文字不垂直居中

问题描述

在安卓等移动浏览器中placeholder中的文字不垂直居中问题

左边是Chrome调试的效果，也就是说在Chrome是没有问题的；右边是在一台安卓手机的浏览器中的效果

解决办法

1.line-height:

 normal; /* for non-ie */  

2.line-height:

 22px\9; /* for ie */  

3.input:

:

-webkit-input-placeholder { /* WebKit browsers */

  line-height:

 1.5em;

}

input:

-moz-placeholder { /* Mozilla Firefox 4 to 18 */

  line-height:

 1.5em;

}

input:

:

-moz-placeholder { /* Mozilla Firefox 19+ */

  line-height:

 1.5em;

}

input:

-ms-input-placeholder { /* Internet Explorer 10+ */

  line-height:

 1.5em;

}

14.Ios数字颜色样式超过9位后失控

问题描述

在ios中，当数字超过9位数时，浏览器会给这个数字默认加上一个颜色，无论你设置什么颜色都无效

解决办法

15.Img定位3px问题

问题描述

img是一种类似text的元素，在结束的时候，会在末尾加上一个空白符，所以就会多出3px。

解决办法

给img加上display:

block;

16.问题

问题描述

解决办法