移动端适配问题

手机端文字大小用什么单位

对于只须要适配少部分手机设备，且分辨率对页面影响不大的，使用px便可

对于须要适配各类移动设备，使用rem，例如只须要适配iPhone和iPad等分辨率差异比较挺大的设备

 iscroll安卓低版本卡顿，如何解决？

方案一：iScroll v5.1.3 设置momentum: true

方案二：配置probeType

方案三：开启硬价加速：给scroll元素增长css样式：一webkit一transform:translate3d(0,0,0);

方案四：判断手机版系统版本，应用原生CSS: overflow:scroll一y

真机测试哪些机型？

从iphone5之后都测，华为p系列及mate系列， oppo VO机型，小米近两代（小米6），红米，三星

如何测试：打开手机开发者模式、usb调试功能，数据线链接上电脑，在chrome浏览器上输入chrome://inspect，会自动识别出webkit内核的浏览器打开的页面，便可查看页面的console

移动端overflow:hidden有可能不生效，左右出现滚动条。

这个问题比较麻烦，缘由是某些元素的宽高超过了100%，必须逐一排查

animation-play-state: paused; 动画中止属性，可是这个属性在IOS上不生效。
替代方案：animation: none;，但这样会使动画回到原点而不是当前运动状态的快照
rotateX, rotateY IOS上有可能发生旋转过程当中消失。
解决方案： 设置元素被查看位置的视图 perspective: 3000px;，在StackOverflow上找到的答案
UC旧版本的浏览器不支持flex，

替代方案 内容区域高度100%，头部和底部定位。

安卓机型上动态追加的button的文字纵向没居中。固定写死的button纵向居中了，二者的css彻底一致。
缘由：rem计算的像素值有多是小数。致使浏览器渲染的时候，产生一像素误差。
解决方案：使用px设定line-height

经常使用的抓包工具：fildler（http协议），wireshark（任何协议），Charles

IE7-不支持border:none;

透明写法1.opacity:0~1;IE8以上的浏览器 2.filter:alpha(opacity=1~100);     IE9及IE9如下的浏览器

常见浏览器兼容前缀？

-ms-
-webkit-
-o-
-moz-

 常见的手机应用的后缀:

安卓：.apk 苹果：.ipa 

wp7 wp8的是xap wp8.1之后用8.1的sdk开发的是appx 跟win8 metro应用通用的

移动端去除滚动条？

::-webkit-scrollbar {
    display: none;  //或width:0;
}

Viewport

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

 

 移动布局自适应不一样屏幕的几种方式

(1)   响应式布局

@media only screen and (min-device-width: 320px)and (-webkit-min-device-pixel-ratio: 2) {
   //针对iPhone 4, 5c,5s, 全部iPhone6的放大模式，个别iPhone6的标准模式<br>　　html{<br>　　　　font-size:10px;<br>　　}
}
@media only screen and (min-device-width: 375px)and (-webkit-min-device-pixel-ratio: 2) {
　　//针对大多数iPhone6的标准模式<br>　　html{<br>　　　　font-size:12px;<br>　　}
}
   
@media only screen and (min-device-width: 375px)and (-webkit-min-device-pixel-ratio: 3) {
　　//针对全部iPhone6+的放大模式<br>　　html{<br>　　　　font-size:16px;<br>　　}
   
}
@media only screen and (min-device-width:412px) and (-webkit-min-device-pixel-ratio: 3) {
　　//针对全部iPhone6+的标准模式,414px写为412px是因为三星Nexus 6为412px，可一并处理<br>　　html{<br>　　　　font-size:20px;<br>　　}
}

View Code

(2)   100%布局（弹性布局）

(3)   等比缩放布局（rem)

100vw 等于视口宽度，以iphone5为例，即100vw = 320px ，100px = 100/320*100vw ->31.25vw = 100px 这也是就是31.25的解决方案来源

3、 请说下移动端常见的适配不一样屏幕大小的方法？

响应式布局

简而言之，就是页面元素的位置随着屏幕尺寸的变化而变化，一般会用百分比来定位，而在设计上须要预留一些可被“压缩”的空间。

Cover布局

就跟background一size的cover属性同样，保持页面的宽高比，取宽或高之中的较小者占满屏幕，超出的内容会被隐藏。此布局适用于主要内容集中在中部，边沿无重要内容的设计。

Contain布局

一样，也跟background一size的contain属性那样，保持页面的宽高比，取宽或高之中的较大者占满屏幕，不足的部分会用背景填充。我的比较推荐用这种方式，但在设计上须要背景为单色，或者是可平铺的背景。

 大家作移动端平时在什么浏览器上测试？

Chrome，Safari，微信X5, UC，其余手机自带浏览器

解决移动端点透问题和300ms延迟？

引入fastclick

FastClick.attach(document.body);

全部的click响应速度直接提高，并且click没必要替换为tap了，input获取焦点的问题也解决了，

 说说移动端是如何调试的？

移动端调试：

(1)   模拟手机调试

(2)   真机调试之android手机+Chrome

(3)   真机调试之 iphone + safari ⑷UC浏览器

(1)   微信内置浏览器调试

(2)   debuggap

(3)   抓包

详细参考：https://segmentfault.eom/a/1190000005964730

 ICONFONT使用及其利与弊？

把一些零散的icon作成字体。咱们调用文字的时候，渲染出来的就是icon图像，这样的显示就是iconfont（字体图标）

好处：iconfont图像放大后，不会失真。iconfont节省流量 iconfont在颜色变幻方面很简单

缺点：iconfont不能支持一个图像里面混入多重颜色 iconfont的使用没有使用图片那么直接，简单。

详细参见：https://segmentfault.com/a/1190000005904616? ea=953657

 说说移动端Web分辨率

从如下几个方面作答：

(1)   pc到移动，渲染的变迁

(2)   能够更改的布局宽度

(3)   再次变迁的像素

(4)   又一次变迁

(5)   是时候说说安卓了

详细参见：http://www.javashuo.com/article/p-ghwggguw-ez.html

  js获取dpr 

window.devicePixelRatio

有可能提供的设计稿尺寸：
750 最多见的设计稿尺寸，iphone6，dpr2,750 = 375*2
1242 iPhone6 Plus，dpr3,1242 = 414 *3

绝大多数的安卓机型viewport只支持1，不是1也认为是1。

IOS的移动设备：
iPhone4, 4s, 5, 5s, 6, 6+, 6s, 6s+ 都是Retina屏，
其中4, 4s, 5, 5s, 6, 6s的ppi都是326，dpr都是2，6+和6s+ppi是441，dpr是3。

1、 rem布局字体太大怎么处理？

通常状况下咱们设置了html根节点的字体大小做为rem单位的一个基本标准，那么我 们能够紧接着在body标签内设置一个字体大小为该应用的基本字体大小

针对于一些机型若是一开始就显示的字体不正常，咱们能够经过判断机型而后加载不一样的样式

<script language="javascript">

window.onload = function() {

　　alert(“1”);

　　var u = navigator.userAgent;

　　if(u.indexOf('Android') > 一1 ||  u.indexOf('Linux') > -1) { //安卓手机

　　　　alert("安卓手机")；

　　} else if(u.indexOf('iPhone') > 一1) { //苹果手机

　　　　alert("苹果手机")；

　　} else if(u.indexOf('Windows Phone') > 一1) { //winphone手机                          alert("winphone 手机")；

　　}

}

</script>

 移动端网页打开app是经过url schema来打开。 须要向原生开发人员询问才知道。

好比：< a href="eleme://catering?restaurant_id=406894">打开饿了么</a>

商城类项目的功能：http://mb.ecmoban.com/kuajingtong/