移动端兼容性及常见问题

《移动端兼容性及常见问题》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、移动端开发兼容性及常见问题汇总1.设置placeholder字体颜色4问题描述4解决办法42.移动端高亮4问题描述4解决办法43.a与input嵌套无鼠标无手型效果5问题描述5解决办法54.Input框获得焦点时有蓝色外框线5问题描述5解决办法55.IOS下按钮等默认样式5问题描述5解决办法66.通过媒体查询进行屏幕适配6问题描述6解决办法67.弹性盒子布局6问题描述6解决办法78.竖屏转横屏文字变大7问题描述7解决办法89.盒子边框溢出8问题描述8解决办法910.IOS长按链接弹出对话框9问题描述9解决办法911.p

2、laceholder中的文字不垂直居中9问题描述9解决办法1012.Ios数字颜色样式超过9位后失控10问题描述10解决办法1113.Img定位3px问题11问题描述11解决办法1114.问题12问题描述12解决办法1215.问题12问题描述12解决办法1216.问题12问题描述12解决办法1217.问题12问题描述12解决办法121.移动端事件问题描述解决办法2.字体单位问题描述字体单位设置解决办法Body{Font:62.5%/150%;}字体单位采用rem3.设置placeholder字体颜色问题描述PC端plc

3、aeholder可以通过修改input的color属性来改变颜色，但手机端无效果在手机端Form中placeholder字体有默认颜色解决办法input::-webkit-input-placeholder{color: #D7F2EB;}input:-ms-input-placeholder{color: #D7F2EB;}input::-moz-placeholder{color: #D7F2EB;}1.移动端高亮问题描述移动端点击input等元素点击时会出现蓝色高亮背景解决办法body{-webkit-tap-h

4、ighlight-color:rgba(0,0,0,0)}2.a与input嵌套无鼠标无手型效果问题描述注：此问题为PC端问题布局结构如下：  则input盖住a，导致鼠标移到a上无手型指针解决办法input[type="button"]{cursor:pointer;}1.Input框获得焦点时有蓝色外框线问题描述Input会有默认蓝色外框线解决办法input{outline: none;}2.IOS下按钮等

5、默认样式问题描述IOS下的按钮会自动加圆角，加颜色渐变，搜索类型按钮会自动加圆角解决办法input{-webkit-appearance: none;}3.通过媒体查询进行屏幕适配问题描述移动开发面对的屏幕尺寸那叫一个丰富，其中安卓阵营就够让人头痛的。解决办法1.弹性盒子布局问题描述完成如下效果，形成多列布局，并且多屏幕适配解决办法使用盒子布局父元素：display:-webkit-box子元素：-webkit-box-flex:11.竖屏转横屏文字变大问题描述当竖屏的屏的时候显示效果不错，但是当横屏的时候，字体会变大

6、，无论你怎么设置字体大小都无效解决办法禁止自动调整-webkit-text-size-adjust:none1.盒子边框溢出问题描述当我们指定了一个块级元素时，并且为其定义了边框，设置了其宽度为100％。按照盒子模型，就会发现该元素的左右边框各1个像素会溢了，导致出现横向滚动条解决办法指定盒子的大小包括边框的宽度-webkit-box-sizing:border-box2.IOS长按链接弹出对话框问题描述在项目开发中，有时我们需要某个链接在当前页面打开，这样需要禁止用户在新窗口打开页面，我们可以使用a标签的target

7、=”_self”指定在当前页面打开，但是在iOS中长按链接一段时间后，系统会弹出一个对话框，用户可以通过点击”在新页面中打开”来在新窗口打开页面，这样我们指定的target属性就失效了解决办法可以通过指定当前元素的-webkit-touch-callout属性为none来禁止iOS弹出这些按钮3.placeholder中的文字不垂直居中问题描述在安卓等移动浏览器中placeholder中的文字不垂直居中问题左边是Chrome调试的效果，也就是说在Chrome是没有问题的；右边是在一台安卓手机的浏览器中的效果解决办法1.

8、line-height: normal; /* for non-ie */  2.line-height: 22px9; /* for ie */  3.input::-webkit-input-placeholder { /* WebKit browsers */  line-height: 1.5em;}input:-moz