移动端web兼容性_web前端的移动端的兼容性问题怎么解决

‘壹’ 移动开发 or web 前端

如果你对某一方向感兴趣,比如 web 前端跟移动开发都接触了解过,但是对某一个很感兴趣,那么我强烈建议跟随你的兴趣,不用担心市场、专业不符等其他客观条件,掌握好一门技能最多是...

‘贰’ 处理移动端的常见的兼容性的问题都有什么

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三人行慕课）

‘叁’ 你们开发移动端web页面需要考虑兼容吗

兼容还是需要考虑的。主流的也就那么几个浏览器吧，都试试呗。

‘肆’ 移动前端开发和web前端开发有什么区别

移动前端开发和web前端开发有什么区别呢？既然都是前端开发，两者肯定有紧密的联系，移动前端开发和web前端开发其实都属于前端开发的范围，目前前端发展的趋势就是大前端，可以说是包罗万象，当然也就包含PC端和移动端领域，而现在的前端开发人员也已早就不是当年的切图仔了，需要学习和掌握大前端体系方方面面的知识才能在日常的开发中游刃有余，但是不论趋势如何发展，目前来看HTML、CSS和Java依然是整个前端开发的三大基石。不论是想做移动前端开发还是web前端开发，这三样基础技术都必须熟练掌握。移动前端开发和web前端开发有什么区别呢？
1、业务的应用场景
web前端开发主要指传统的PC端网页开发，页面主要是运行在PC端浏览器中，移动前端开发出来的页面主要是运行在手机上；直观上会感觉，PC端页面大一些，移动端页面小一些，但是根据开发经验，页面大可并不代表书写的代码复杂，页面小也并不意味着开发简单，难与易主要还是取决于具体的业务需求。
2、新技术的使用
由于在移动端主要以webkit内核为主，对于HTML5等新技术支持的更好，所以可以更大范围的使用新技术;而PC端开发由于很多场景下要求兼容IE等老版本浏览器，出于浏览器兼容性的考虑，有些情况下限制了新技术的使用。
3、页面的适配性
传统PC端的页面开发一般都会选择给页面设定一个固定宽度，两侧有留白，但是移动端的页面由于其载体手机屏幕比PC要小很多，一般都会选择尽可能多的在手机屏幕上显示内容，这就要求移动端页面要能够充分适应各种屏幕尺寸的手机并进行最大程度的利用。从这一点上来说移动端页面的适配难度更高一些。
4、页面的性能
PC端的网络情况一般比较稳定，都是通过网线或者Wi-Fi连接网络;但是移动端就比较复杂，除了Wi-Fi，还有2G、3G、4G甚至是在几种不同的网络连接中交替切换也经常发生，不稳定的网络连接对页面性能带来的挑战是移动端的页面资源不能太大，否则在恶劣网络情况下时，页面将会无法访问，严重影响用户体验。移动前端开发和web前端开发有什么区别
5、框架选型
由于移动端网络情况的不稳定，导致我们在移动端页面框架选型时，一般只考虑小而美的框架，例如像zepto.js这样的压缩之后只有9.6K，就能满足一般业务的需要，如果是想要构建更复杂的单页面应用，可以选择像vue.js这样的框架，功能强大，但体积压缩后却只有20多K。而web端相对选择的范围就比较大，一些比较重型的框架也可以根据项目需求加以考虑，例如古老但庞大的ext.js，依然凭借着众多UI组件活跃在一些企

‘伍’ 移动前端开发和web前端开发有什么区别

移动前端开发和 Web 前端开发的区别是:
1、前端是相对比较大的概念，一般是指用户能够看到、直接接触的界面都算是前端，比如iOS界面，安卓界面，网页界面，PC/Mac桌面软件的界面。最常见的是Web前端，也就是针对于网页端开发的工作。

2、Web App即Web application，也就是以浏览器作为客户端的软件。例如，用桌面客户端来收发邮件，但也可以直接用浏览器登陆gmail或者QQ邮箱，直接使用网页版的软件来使用。总之就是使用网页版代替本地软件。
Mobile Web App就是在手机端打开的Web App。例如Gmail的移动端软件

3、目前，移动客户端的开发主要包括三种类型：
Native App（原生APP）：也就是完全使用移动设备系统语言写的客户端。iOS系统就是使用Objective-C语言来编写本地应用，也可以使用苹果于2014年苹果开发者大会上发布的SWIFT语言；Android平台就是使用Java语言来开发。原生APP就是从界面到交互都是使用官方标准语言来编写，效率和稳定性都是最好的，但欠缺灵活性。
Web App：这个就是在移动浏览器里打开的，使用Web前端开发语言HTML CSS JavaScript来开发的，基本上就是个网页，
Hybrid App：主要使用HTML5实现。一般使用Native语言实现一个容器，然后使用HTML CSS JS来实现用户界面和交互。这样方式既克服了Web App容器暴露偏底层的接口这样的问题，同时比起原生的开发灵活性要高。这样就更新可以更方便快捷，也不依赖于市场。例如，豌豆荚其实是个PC端的hybrid app 。
对于以上三种开发方式的比较和分析搜索引擎里面有太多的内容了，这里也就不再赘述了。

4、移动端网页布局方法与pc的差异。
主要是css方面，外加如何做到同一url，不同客户端展现不一致的做法，俗称pc和mobile都兼容。还有会说一下rem的相关用法和一段比较经典的rem.js

最后总结一下：
其实这两者最显着的区别就是，web app是不依赖于具体的设备的，通用性较强，只要手机或PC有相应内核的浏览器就基本OK。而mobile的app则依赖于具体的设备，一旦更换设备，需要重新下载才能继续使用。
移动前端开发主要来说的是Native Client的开发Android为Java，iOS为Objective-C，然后么HTML5应用号称跨平台其实差异很大。
Web前端开发么基本上就是HTML JavaScript CSS，不过有些人把Servelt/JSP, PHP,Ruby,Python,C#之类的只要关系到页面的也叫做Web前端开发。
app是应用，每个操作系统有专门的开发工具和语言
web是网页，使用html+css+js，有工具可以生成转化为app，不过效果一般

‘陆’ Web端测试和移动端APP测试在操作特性上有什么区分

区分方法汇总：

1、记录bug

在Web端可以通过系统自带的截图和QQ截图等方式来截取bug的图片，对于错误的地方可以用工具自带的标识来重点标记。
对于移动端设备可以用手机自带的截图工具来截图然后传到电脑上，个人一般习惯安装微信的windows版本，通过文件传输助手发送到PC端。

2、测试环境

Web端的测试环境很多时候是通过hosts进行切换，switchhosts工具可以方便的切换需要的host。
移动端设置起来比较复杂，比较简单的方式是电脑端设置代理，手机端直接连接代理。

3、兼容性

web端的测试一般都是主要使用一种浏览器，待系统基本稳定的时候，再去专门测试浏览器的兼容性。
移动端主要分为安卓和IOS，而这两端出现的问题一般是不一致的，一致的问题主要是数据问题，这时候是需要后台处理的。

移动端与web端相比较来说，移动端有很多自己的特性，无线网络、2G、3G、4G等，断网、网速较差及网络之间的切换时页面的显示等，这些对于移动端来说很重要。此外，在非wifi下，还需要注意网络使用量问题。

‘柒’ 移动前端开发和web前端开发的区别

移动前端开发和web前端开发其实都属于前端开发的范围，目前前端发展的趋势就是大前端
那么他们的区别在哪呢？我给你分析一下：
1、新技术的使用
目前移动终端主要以Webkit内核为中心，更好地支持HTML5等新技术，让新技术得到更广泛的应用。但是PC终端的开发需要兼容IE等老浏览器，所以新技术的应用必须考虑浏览器的兼容性。
2、业务的应用场景
Web前端开发主要是指传统的在电脑端开发网页，网页主要运行在PC端，而手机端开发的网页运行在手机端。这两者没有区别，孰难孰易。开发难度主要看业务需求。
3、页面的适配性
在传统的PC端页面开发中，需要为页面设置固定的宽度，以确保两侧都有页边距。但是移动页面会选择在手机屏幕上显示尽可能多的内容，因为它的运营商手机屏幕比PC端小得多。这时候就要求移动页面要能完全适应各种屏幕尺寸的手机，最大限度地利用。从这个页面的适应性来看，移动端比PC端更难。
4、页面的性能
一般情况下， PC端的网络通过网线或 WIFI与网络相连，而移动端则比较复杂。除 WIFI外，还有2 G、3 G、4 G、5 G，甚至常常会有多个不同网络连接间的切换。因此， PC端的网络状况将比移动端更加稳定。移动端的页面资源不能太大，否则当网络状况不好时，页面无法访问，这对网页性能造成了很大的影响。
以上就是我给你分享的关于移动前端和web前端的区别，希望我的回答对你有所帮助

‘捌’ 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 的


一般在head中添加这几个之后，移动端就没有什么大问题了，希望对你有帮助，望采纳！

‘玖’ 打包的APP里面的web页面是使用移动端默认的浏览器，还是移动端自带的浏览器兼容性主要注意什么

之前默认使用的系统内置浏览器对象，去年应该已经在Android切换为第三方浏览器内核了。兼容性基本不用考虑，不需要考虑media query了等等适配工作。基于参考要求，在任意一个终端上开发，在所有终端上都会有统一的展现。基于em相对字体大小技术+屏幕DPI适配。

‘拾’ 前端面试题，移动端兼容问题有哪些，安卓和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兼容性

与移动端web兼容性相关的内容