移动端开发兼容性及常见问题汇总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%;}字体单位采用rem3.设置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端问题布局结构如下：<a href="#"><input type="button" value="获取短信验证码" /></a>则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:110.竖屏转横屏文字变大问题描述当竖屏的屏的时候显示效果不错，但是当横屏的时候，字体会变大，无论你怎么设置字体大小都无效解决办法禁止自动调整-webkit-text-size-adjust:none11.盒子边框溢出问题描述当我们指定了一个块级元素时，并且为其定义了边框，设置了其宽度为100％。
按照盒子模型，就会发现该元素的左右边框各1个像素会溢了，导致出现横向滚动条解决办法指定盒子的大小包括边框的宽度-webkit-box-sizing:border-box12.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。
<li><img src="img/nearbyBanner1.png"/><div><p>卡不卡不蛋糕店<span>1.5km</span></p><p>雪域牛奶芝士生日奶油新鲜蛋糕</p></div></li>解决办法给img加上display: block;16.问题问题描述解决办法。