㈠ 处理移动端的常见的兼容性的问题都有什么
1.定位问题：ios
2.写背景图时最好加上top left 或者0 0 不然写运动效果时容易出现跳
3.防止手机中网页放大和缩小:<meta name="viewport" content="user-scalable=0" />
4.设置Web应用是否以全屏模式运行:<meta name="apple-mobile-web-app-capable" content="yes">,content的默认值是no
5.自动识别电话号码:<meta name="format-detection" ontent="telephone=no">,telephone=no可以禁用这功能,默认值是no
6.禁止复制、选中文本:
Element {
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
7.设置缓存:
<meta http-equiv="Cache-Control" content="no-cache" />
8.苹果手机固定定位有bug 检查html和body是不是设置了overflow-x:hidden;
9.IOS手机中如果出现一个元素的层级非常高可还是被别的元素遮盖的，那么就将该元素与别的元素同级
10.给不同屏幕大小的手机设置特殊样式:
@media only screen and (min-device-width : 320px)
and (max-device-width : 375px){ }
11.IOS中input键盘事件keyup、keydown、keypress支持不是很好, 用input监听键盘keyup事件，在安卓手机浏览器中是可以的，但是在ios手机浏览器中用输入法输入之后，并未立刻相应keyup事件，只有在通过删除之后才可以响应
方法：可以用html5的oninput事件去代替keyup
<input type="text" id="testInput">
<script type="text/javascript">
document.getElementById('input').addEventListener('input', function(e){
var value = e.target.value;
});
</script>
12.ios 设置input 按钮样式会被默认样式覆盖
解决方式如下：
input,
textarea {
border: 0;
-webkit-appearance: none;
}
13.消除 IE10 里面的那个叉号:
input:-ms-clear{display:none;}
14.关于 iOS 系统中，中文输入法输入英文时，字母之间可能会出现一个六分之一空格可以通过正则去掉
this.value = this.value.replace(/\u2006/g, ''); （BY三人行慕课）
㈡ 前端常见移动端兼容问题
因为手机分辨率太小，如果按照分辨率来显示网页，字会非常小，安卓手机 devicePixoRadio 比较乱，有 1.5 的，有 2 的也有 3 的。想让图片在手机里显示更为清晰，必须使用 2x 的背景图来代替 img 标签（一般情况下都是 2 倍的），或者指定 background-size:contain; 都可以
用 -webkit-min-device-pixel-ratio 可以做到不同倍余销顷数不同尺寸的图片：
Android3+和 iOSi5+支持 CSS3 的新属性为 overflow-scrolling
设置 alpha 值为 0 就可以去除本透明灰色遮罩，备注：transparent 的属性值在 android 下无效。
方法一：body 添加 ontouchstart
方法二：js 给 document 绑定 touchstart 或 touchend 事件
在移动端中，如果给元素设置一个像素的边框的话，那么在手机上看起来是会比一个像素粗的。
解决方法：使用伪类元素模拟边框，使用 transform 缩放
某些低端手机不支持 css3mask，可以选择斗氏性的进降级处理
比如可以使用 js 判断来引用不同 class：
pc 端字体正常显示，但 ios 真机就出现，h1、span 等标签字体比较大。
某些 Android 手机圆角失效 background-clip:padding-box ;
在移动端中，click 事件是生效的，但是，点击之后会有 300ms 的延迟响应
原因：safari 是最早做出这个机制的，因为在移动端里，浏览器需要等待一段时间来判断此次用户操作是单击还是双击，所以就有 click300ms 的延迟机制，Android 也很快就有了
不用 click，用自定义事件 tap
tap 是需要自定义的：如果用户执行了 touchstart 在很短的时间又触发了 touchend ,且两次的距离很小，而且不能
引入 fastclick 库来解决
在移动端中，图片的处理应该是很谨慎的，假设有一张图片本身的尺寸是 X 宽，设置和包裹它的 div 一样宽，如果是 div 宽度小于图片宽度没有问题，但是如果 div 宽度大于图片的宽度，图片被拉伸失真
解决方法：让图片最大只能是自己的宽度
例如：
div 是绝对定位的蒙层，并且 z-index 高于 a。而 a 标签是页面中的一个链接，我们给 div 绑定 tap 事件：
我们点击蒙层时 div 正常消失，但是当我们在 a 标签上点击蒙层时，发现 a 链接被触发，这就是所谓的点透事件。
原因：
touchstart 早于 touchend 早于竖陆 click。即 click 的触发是由延迟的，这个时间大概在 300ms 左右，也就是说我们 tap 触发之后蒙层隐藏。此时 click 还没有触发，300ms 之后由于蒙层隐藏，我们的 click 触发到了下面的 a 链接。
解决：
1.尽量都使用 touch 事件来替换 click 事件。例如用 touchend 事件（推荐）
2.用 fastclick
3.用 preventDefault 阻止 a 标签的 click
㈢ 前端ios与android的兼容性问题怎么解决
解决浏览器兼容是必备问题，比如360的极速和兼容模式显示同一个网页
㈣ 前端面试题，移动端兼容问题有哪些，安卓和ios问题
那么进入正文，不废话，直接把自己了解到的和一些看法说出来。
首先是屏幕问题，现在主流的移动设备以安卓和IOS为主，我们在制作移动端页面也是以兼容这两种设备去布局。
首先说iPhone，不得不说iPhone的屏幕考虑到了我们开发者的难处，从而给出iPhone屏幕的dpr都是整数值，在6plus出现之前，iphone的dpr始终是2（物理像素/逻辑像素＝2），即使是6plus出现了，iphone到底其实也就只有2，3这两个dpr。其实6plus的实际dpr并不是整数，而是2.87左右，不过，为了方便开发者来开发，iphone6plus对其做了一个调整，将dpr调整为3，然后在对屏幕进行了一个缩放。所以我们很容易对其做到兼顾。
而安卓的dpr值，并不像iphone那样就只有两个值。安卓的dpr是千奇百怪的，可能是1.5，2，3，4，2.5等等的都有。（甚至我还看到了1.7之类的，安卓的各个设备商，玩的真尼玛high啊。怎么高兴怎么来。）
那么现在开始说说移动端怎么布局以及字体该怎么设置，因为有各种各样的解决方式，我就不一一赘述，直接说手淘的解决方案：flexible.js
我为什么又一次把这个拿出来说，主要有两点原因：1.我觉得它好用，解决方式简单粗暴。2.它经过了比较长时间的考验，如今手淘还在用它。
具体的使用方法自己可以去flexible.js看看，这里我简单说说它的方案以及个人对它的改良。
㈤ web前端的移动端的兼容性问题怎么解决
//兼容IE浏览器的
<meta http-equiv="X-UA-Compatible" content="IE=edge">
//兼容移动端的
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
//html5.shiv兼容不支持html5 的
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
一般在head中添加这几个之后，移动端就没有什么大问题了，希望对你有帮助，望采纳！
㈥ 前端兼容苹果手机ios问题锦集
new Date("2020-02-02 08:00") 变为 new Date("2020/02/02 08:00")
html,body{ -webkit-text-size-adjust: none; } // 当需要在中文版chrome浏览器中显示小于12px的字体时，而且此时页面放大效果腔唤会被阻止
html,body{ -webkit-tap-highlight-color: rgba(0,0,0,0); } /拆闹/ 去掉苹果手机点击瞬间出现的灰色背景
input{ -webkit-appearance: none; } // 去除苹果手机默认的input样式）
selector{ cursor: pointer } // 给IOS系统里cursor不为pointer的元素添加事件时会不同程度受影响，加上cursor: pointer可解决
img{ pointer-events: none; } // 阻止图片在伍御凯微信里被点击放大
㈦ 关于H5在安卓ios平台兼容性问题，及解决方案
capture 属性：在webapp上使用 input 的 file 属性，指定 capture 属性可以调用系统默认相机、摄像胡握绝尘和录音功能。
capture 表示，可以捕获到系统默认设备的媒体信息，如下：
capture="camera" 相机
capture="camcorder" 摄像机
capture="microphone" 录音裤宏庆
㈧ Vue项目在部分ios手机Safari浏览器上打开为白屏
Vue项目在部分ios手机Safari浏览器上打开为白屏有可能是一下原因造成：
第一：部分es6语法不兼容 推荐在全局引入 babel-polyfill 解决es6在Safari的兼容问题
第二：有部分Safari浏览器设置了不允许网站读写所有cookie，不允许网站跟踪，这种仔历情况下在项目中使用 localStorage sessionStorage cookie都会报错（大部分是这个原因）
查看Safari隐樱扮私和安全性：设置-> Safari
第三：在Safari如何跟踪调试
1、打开手机端web检查器，设置-> Safari ->高级（最底部）-> Web检查器打开
脊戚灶 2、确保iOS系统手机接入 MAC 电脑（必须是Mac，window调试不了ios系统）
3、找到Mac电脑的 Safari浏览器，找到开发者，就会显示的手机的设备
4、此时此刻就可以使用了，调试各个App上网页版的页面了。
注：如果是 Hybrid 嵌入式开发，线上版本，可能就不能调试了，因为IOS App 会把线上的调试功能 给禁用，安全！
㈨ 国内服务器微信项目安卓手机访问很流畅,ios手机访问很卡
题主是否想询问“国内桐伏服务器微信项目安卓手机访问很流畅，ios手机访问很卡怎么办吗”解决方法：
1、优化前端代码，确保代码的兼容性和性能。可以使用一些前端性能优化工具，如Webpack、Gulp、Grunt等，来对前端代码进行优化和压缩，以提高页面的加载速度和性能。
2、针对不同的操作系统和浏览器，进行适配和优化。可以使用一些前端框架，如Bootstrap、AntDesign、MaterialUI等，来进行页面的适配和优化，保证在不同的操作系统和浏览器上都能够正常运行和局羡携显示。
3、在服务器端进行优化，提高服务器的响应速度和处理能力。可以对服务器进行升级或者优化，增加带宽和处理器等硬件资源，以提高服务器的响应速度和处理能力，从而提高网站的访问速度和性能。
4、针对不同的操作系统和浏览器进行测试和调试，找出问题的具体原因，进行针对性的解决。可以使用一些调试工具，如ChromeDevTools、Firebug等，来进行调试和排查问题派猜。
㈩ ios和android 浏览器适配问题总结
移动端、 适配（兼容）、 ios点击事件300ms延迟、 点击穿透、 定位失效......
关于Web移宴孝漏动端Fixed布局的解决方案，这篇文章也不错 http://efe..com/blog/mobile-fixed-layout/
详细介绍见这里： https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events
一篇文章有详细介绍，地址： http://www.jb51.net/post/phone_web_ysk
//问题一解决，我目前用的是js。如下
//问题二，是因为form提交默认做了表单验证，step默认是1,要设置step属性，假如保留2位小数，写法如下：
<input type="number"step="0.01"/>
关于step，我在这里做简单的介绍，input 中type=number，一般会自动生成一个上下箭头，点击上箭头默认增加一个step，点击下箭头默认会减少一个step。number中默认step是1。也就是step=0.01,可以允许输入2位小数，并且点击上下箭头分别增加0.01和减少0.01。
假如step和min一起使用，那么数值必须在min和max之间。
看下面的例子：
<input type="number"step="3.1"min="1"/>
输入框可以输入哪些数字？
首先，最小值是1，那么可以输入1.0，第二个是可以输入（1+3.1）那就是4.1,以此类推，每次点击上下箭头都会增加或者减少3.1，输入其他数字无效。这就是step的简单介绍。
//问题三，去除input默认样式
解决方慎凯式如下：
设置如下：
可以设置如下：
iOS 浏览器横屏时会重置字体大小，设晌烂置 text-size-adjust 为 none 可以解决 iOS 上的问题，
但桌面版 Safari 的字体缩放功能会失效，因此最佳方案是将 text-size-adjust 为 100% 。
这个不是 BUG，由于自动播放网页中的音频或视频，会给用户带来一些困扰或者不必要的流量消耗，所以苹果系统和安卓系统通常都会禁止自动播放和使用 JS 的触发播放，必须由用户来触发才可以播放。
解决方法思路：先通过用户 touchstart 触碰，触发播放并暂停（音频开始加载，后面用 JS 再操作就没问题了）。
这个我感觉没有什么好的解决方案，用如下方法
有些机型的搜索input控件会自带close按钮（一个伪元素），而通常为了兼容所有浏览器，我们会自己实现一个，此时去掉原生close按钮的方法为:
如果想使用原生close按钮，又想使其符合设计风格，可以对这个伪元素的样式进行修改。
//zepto方式: