编写移动端遇到的问题

移动端遇到的问题

问题1
iPhone页面会自动把数字当成电话号码，点击后自动跳到电话拨号界面
解决方案：<meta name="format-detection" content="telephone=no" />

问题2
微信浏览器自动调整页面字体大小
方案：禁止微信浏览器调整页面字体大小

body{
-webkit-text-size-adjust:100% ！important；
}

问题3
用户随意选中页面文字及图片
方案：如无文本选中需求，此为必选项

body{
-webkit-user-select：none；
}

问题4
iPhone长按图片保存图片弹窗
方案：关闭长按图片保存图片弹窗

img{
-webkit-touch-callout：none；
}

问题5
iPhone输入框的光标发生位移，上移或者下移
方案：不要设置line-height即可

input【type=button】，input【type=reset】，input【type=submit】{
resize：none；
border：none；
outline：none；/*去除自带轮廓线*/
/*appearance允许使元素看上去像标准的用户界面问题*/
-webkit-appearance：none；/*解决iphone圆角问题*/
border-radius：0；/*解决iphone圆角问题*/

}

问题6
表单input元素获取焦点时页面被放大
表现：在iPhone上点击input框会有一个动画效果，这是苹果公司默认设置的，每次input获取焦点都会使页面放大，效果非常不好看
方案：<!--加入meta标记-->

<meta name="viewport"
 content="width=device-width,height=device-height,user-scalable=no,initial-scale=no">

问题7
iPhone移动端input 无法获取焦点
原因：在移动端开发中，我们有时有针对性的写一些特殊的重置，在整个项目之中有一个需求，禁止用户进行复制.选择.，于是写了这样的代码 -webkit-user-select: none;影响到了input获取焦点。
方案：把-webkit-user-select:none改成-webkit-user-select:auto;覆盖掉或者直接注释掉就行，如果项目需要，就不用注释了。

问题8
360浏览器兼容模式打开项目无法正常浏览
场景表现：自己写完项目在各个浏览器检查时，并没有问题，当项目给到后台同事的时候，在他们的电脑上用360浏览器兼容模式打开项目，出现不兼容的问题。
同事的电脑安装的同样都是同一版本的360浏览器。最后，经过查阅资料发现，360兼容模式出现的兼容问题，实质还是IE的兼容问题，同时，每个电脑内置的IE版本是不一样的，开发时电脑内置IE的版本高，而同事的版本低导致出现渲染页面时出现问题。

问题9
360浏览器兼容模式打开项目无法正常浏览
方案：在头部加上以下代码

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

问题10
移动端click事件延迟300ms
场景：一般情况下，如果没有经过特殊处理，移动端浏览器在派发点击事件的时候，通常会出现300ms左右的延迟。也就是说，当我们点击页面的时候移动端浏览器并不是立即作出反应，而是会等上一小会儿才会出现点击的效果。
在移动WEB兴起的初期，用户对300ms的延迟感觉不明显。但是，随着用户对交互体验的要求越来越高，现今，移动端300ms的点击延迟逐渐变得明显而无法忍受。
那么我们该如何解决这个问题，大家可以参考如下的几种方法。

①禁用缩放

<meta name="viewport" content="width=device-width, user-scalable=no">

②FastClick插件

FastClick是FT Labs专门为解决移动端浏览器 300 毫秒点击延迟问题所开发的一个轻量级的库。简而言之，FastClick 在检测到 touchend 事件的时候，会通过 DOM 自定义事件立即触发一个模拟 click 事件，并把浏览器在 300 毫秒之后真正触发的click事件阻止掉。
用法：FastClick 的使用方法非常简单，在 window load 事件之后，在body上调用FastClick.attach()即可。

1.引入脚本：引入插件的js文件到HTML网页中，脚本必须加载到实例化fastclick在页面的任何元素之前

2.引入脚本：引入插件的js文件到HTML网页中，脚本必须加载到实例化fastclick在页面的任何元素之前。如果使用了jquery插件，可以这样编写：

问题11

不让 Android 手机识别邮箱

问题12
上下拉动滚动条时卡顿、慢

解决方案：