手机android出现问题怎么解决方案,移动端常见问题及解决方案

一、meta基础知识

1. H5页面窗口自动调整到设备宽度，并禁止用户缩放页面

2. 忽略将页面中的数字识别为电话号码

3. 忽略Android平台中对邮箱地址的识别

4. 当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari

5. 将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式

6. winphone系统a、input标签被点击时产生的半透明灰色背景怎么去掉？

二、常见问题

1.移动端如何定义字体font-family

中文字体使用系统默认即可，英文用Helvetica

2. 移动端字体单位font-size选择px还是rem。

对于只需要适配手机设备，使用px即可，对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。

3. 移动端touch事件(区分webkit 和 winphone)

当用户手指放在移动设备的屏幕上滑动会触发的touch事件

以下支持webkit：

1) touchstart——当手指触碰屏幕时候发生。不管当前有多少只手指

2) touchmove——当手指在屏幕上滑动时连续触发。通常我们再滑屏页面，会调用event的preventDefault()可以阻止默认情况的发生：阻止页面滚动

3) touchend——当手指离开屏幕时触发

4) touchcancel——系统停止跟踪触摸时候会触发。例如在触摸过程中突然页面alert()一个提示框，此时会触发该事件，这个事件比较少用

4. 移动端click屏幕产生200-300 ms的延迟响应

移动设备上的web网页是有300ms延迟的，往往会造成按钮点击延迟甚至是点击失效。

解决方案:

1) fastclick可以解决在手机上点击事件的300ms延迟

2) zepto的touch模块，tap事件也是为了解决在click的延迟问题

触摸事件的响应顺序

ontouchstart -- ontouchmove -- ontouchend -- onclick

解决300ms延迟的问题，也可以通过绑定ontouchstart事件，加快对事件的响应。

5. 在高清显示屏中的位图被放大，图片会变得模糊？

移动端的视觉稿通常会设计为传统PC的2倍。

前端的应对方案是：设计稿切出来的图片长宽保证为偶数，并使用backgroud-size把图片缩小为原来的1/2；

例如图片宽高为：200px*200px，那么写法如下：.css{width:100px;height:100px;background-size:100px 100px;}

其它元素的取值为原来的1/2，例如视觉稿40px的字体，使用样式的写法为20px：.css{font-size:20px}

6. ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉？

ios用户点击一个链接，会出现一个半透明灰色遮罩, 如果想要禁用，可设置-webkit-tap-highlight-color的alpha值为0，也就是属性值的最后一位设置为0就可以去除半透明灰色遮罩a,button,input,textarea { -webkit-tap-highlight-color: rgba(0,0,0,0;) }

7. 部分android系统中元素被点击时产生的边框怎么去掉？

android用户点击一个链接，会出现一个边框或者半透明灰色遮罩, 不同生产商定义出来额效果不一样，可设置-webkit-tap-highlight-color的alpha值为0去除部分机器自带的效果a,button,input,textarea{

-webkit-tap-highlight-color: rgba(0,0,0,0);

-webkit-user-modify:read-write-plaintext-only;

}

-webkit-user-modify有个副作用，就是输入法不再能够输入多个字符

另外，有些机型去除不了，如小米2

对于按钮类还有个办法，不使用a或者input标签，直接用div标签

参考《如何去除android上a标签产生的边框》

8. webkit表单元素的默认外观怎么重置？.css{-webkit-appearance:none;}

9. webkit表单输入框placeholder的颜色值能改变么？input::-webkit-input-placeholder{color:#AAAAAA;}

input:focus::-webkit-input-placeholder{color:#EEEEEE;}

10. webkit表单输入框placeholder的文字能换行么？

ios可以，android不行~

11. 禁用 select 默认下拉箭头

::-ms-expand 适用于表单选择控件下拉箭头的修改，有多个属性值，设置它隐藏 (display:none)