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

移动端开发兼容性 及常见问题汇总 TOC \o 1-3 \h \z \u 1. 设置placeholder字体颜色 4 问题描述 4 解决办法 4 2. 移动端高亮 4 问题描述 4 解决办法 4 3. a与input嵌套无鼠标无手型效果 5 问题描述 5 解决办法 5 4. Input框获得焦点时有蓝色外框线 5 问题描述 5 解决办法 5 5. IOS下按钮等默认样式 5 问题描述 5 解决办法 6 6. 通过媒体查询进行屏幕适配 6 问题描述 6 解决办法 6 7. 弹性盒子布局 6 问题描述 6 解决办法 7 8. 竖屏转横屏文字变大 7 问题描述 7 解决办法 8 9. 盒子边框溢出 8 问题描述 8 解决办法 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. 问题 12 问题描述 12 解决办法 12 16. 问题 12 问题描述 12 解决办法 12 17. 问题 12 问题描述 12 解决办法 12 移动端事件 问题描述 解决办法 字体单位 问题描述 字体单位设置 解决办法 Body{ Font:62.5%/150%; } 字体单位采用rem 设置placeholder字体颜色 问题描述 PC端plcaeholder可以通过修改input的color属性来改变颜色，但手机端无效果 在手机端Form中placeholder字体有默认颜色 解决办法 input::-webkit-input-placeholder{color:?#D7F2EB;}input:-ms-input-placeholder{color:?#D7F2EB;}input::-moz-placeholder{color:?#D7F2EB;} 移动端高亮 问题描述 移动端点击input等元素点击时会出现蓝色高亮背景 解决办法 body{-webkit-tap-highlight-color:rgba(0,0,0,0)} a与input嵌套无鼠标无手型效果 问题描述 注：此问题为PC端问题 布局结构如下： a?href=# input?type=button?value=获取短信验证码?/ /a?? 则input盖住a，导致鼠标移到a上无手型指针 解决办法 input[type=button]{ cursor:pointer; } Input框获得焦点时有蓝色外框线 问题描述 Input会有默认蓝色外框线 解决办法 input{outline:?none; } IOS下按钮等默认样式 问题描述 IOS下的按钮会自动加圆角，加颜色渐变，搜索类型按钮会自动加圆角 解决办法 input{-webkit-appearance:?none;} 通过媒体查询进行屏幕适配 问题描述 移动开发面对的屏幕尺寸那叫一个丰富，其中安卓阵营就够让人头痛的。 解决办法 弹性盒子布局 问题描述 完成如下效果，形成多列布局，并且多屏幕适配 解决办法 使用盒子布局 父元素：display:-webkit-box 子元素：-webkit-box-flex:1 竖屏转横屏文字变大 问题描述 当竖屏的屏的时候显示效果不错，但是当横屏的时候，字体会变大，无论你怎么设置字体大小都无效 解决办法 禁止自动调整 -webkit-text-size-adjust:none 盒子边框溢出 问题描述 当我们指定了一个块级元素时，并且为其定义了边框，设置了其宽度为100％。按照盒子模型，就会发现该元素的左右边框各1个像素会溢了，导致出现横向滚动条 解决办法 指定盒子的大小包括边框的宽度 -webkit-box-sizing:border-box IOS长按链接弹出对话框 问题描述 在项目开发中，有时我们需要某个链接在当前页面打开，这样需要禁止用户在新窗口打开页面，我们可以使用a标签的target=”_self”指定在当前页面打开，但是在iOS中长按链接一段时间后，系统会弹出一个对话框，用户可以通过点击”在新页面中打开”来在新窗口打开页面，这样我们指定的ta