移动端常见问题整理
hoosin opened this issue · comments
通用问题
QQ浏览器
以QQ浏览器为代表的一些国产浏览器a标签添加下划线无效
此问题是一些浏览器故意屏蔽的，有些浏览器提供配置项，有些根本无法修改。
解决方法：如果需要添加划线的文字是单行，可以用border；如果是多行的话目前的方法是在透明图片(或Base64等)的底部填充1px的线，并且图片高度等于文字的行高，然后把这张图片作为背景图水平和垂直方向都填充。此方法适用于display：inline。
UC浏览器
UC 浏览器opacity:0遮罩层无法遮罩input输入，将input设置disable
弹出框fadeOut remove会出现问题，会导致背景颜色渐变后删除,直接remove
class名字使用ad开头在新版iPhone6 plus上会当成广告过滤掉,导致不显示
其他浏览器
手机没法监听document.click事件，touch事件可以，但会有穿透，建议用遮罩层
Touch事件会穿透到下面的a链接，使用click避免
-webkit-box-flex：1 按钮链接文字字数不同会出现不对等情况
数字键盘使用type='tel'
返回键的可点击区域，点击区域范围要大，而且两边点击区域要有间隙大一些，防止错点
给标签定宽度解决
sprite.png 设置background-size时候拼图解决方案
高分辨率图像宽度 / 目标图像宽度 = X 原始Sprites图像宽度 / x = background-size的宽度值
http://www.w3cplus.com/css/css-background-size-graphics.html
IOS
-webkit-flex-direction android手机不可用
http://ued.ctrip.com/blog/wp-content/webkitcss/prop/flex-direction.html
pre_wap1203_【首页】【ios的浏览器】首页联版区滑动到下一页时，下面的功能区和楼层也会闪动
SNBTC-6226
自适应滚动抖动，ios7移动元素加translate3d即可，ios6 移动父节点加translate3d（针对swipe.js交互）
相关说明
pre_wap_【搜索】【iphone6】ios6手机弹出的键盘中没有修改为搜索
SNBTC-6264
form enter无法跳转 加onsubmit="return false;" 此操作会导致ios8 search按钮冲突，加action=””可以解决
http://www.nowamagic.net/html/html_EnterCouseReflesh.php
ios8 fixed跳动
得到焦点隐藏失去焦点展现
Android
pre_wap_【搜索】【android_QQ浏览器】第一次点击首页中的搜索框，弹出的弹出层搜索框里面的没有文字展示
SNBTC-6219
未解决
需求改成文字为空，未解决
pre_wap_【搜索】【android_UC浏览器】在弹出层页面，点击键盘上的完成按键，下拉滚动条，透明层未覆盖首页
SNBTC-6249
将body高度锁屏
相关说明
pre_wap1201_【首页改版】【安卓】【uc浏览器】后台维护的商品推荐带标题模板，前台页面展示图片显示大小不一致
SNBTC-6265
自适应几个图片一行的要设定宽度
相关说明
pre_wap1201_【首页搜索框】【华为P6自带浏览器】华为P6自带浏览器 首页搜索框中搜索两个字不在框中间
SNBTC-6263
用padding控制
相关说明
监听安卓物理返回按键
目前没有直接的方法去监听，貌似在web环境中按下物理返回按键仅仅是调用了history.back()
网上找到一个用HTML5 History pushState的方案 https://github.com/iazrael/xback 不过不太准，经实测不少设备和浏览器无效。