前端面试题，移动端兼容问题有哪些，安卓和ios问题

那么进入正文，不废话，直接把自己了解到的和一些看法说出来。

首先是屏幕问题，现在主流的移动设备以安卓和IOS为主，我们在制作移动端页面也是以兼容这两种设备去布局。

首先说iPhone，不得不说iPhone的屏幕考虑到了我们开发者的难处，从而给出iPhone屏幕的dpr都是整数值，在6plus出现之前，iphone的dpr始终是2（物理像素/逻辑像素＝2），即使是6plus出现了，iphone到底其实也就只有2，3这两个dpr。其实6plus的实际dpr并不是整数，而是287左右，不过，为了方便开发者来开发，iphone6plus对其做了一个调整，将dpr调整为3，然后在对屏幕进行了一个缩放。所以我们很容易对其做到兼顾。

而安卓的dpr值，并不像iphone那样就只有两个值。安卓的dpr是千奇百怪的，可能是15，2，3，4，25等等的都有。（甚至我还看到了17之类的，安卓的各个设备商，玩的真尼玛high啊。怎么高兴怎么来。）

那么现在开始说说移动端怎么布局以及字体该怎么设置，因为有各种各样的解决方式，我就不一一赘述，直接说手淘的解决方案：flexiblejs

我为什么又一次把这个拿出来说，主要有两点原因：1我觉得它好用，解决方式简单粗暴。2它经过了比较长时间的考验，如今手淘还在用它。

具体的使用方法自己可以去flexiblejs看看，这里我简单说说它的方案以及个人对它的改良。

移动端

pm 移动端页面布局

d性布局(100%布局)——拉钩、天猫首页

d性布局（100%布局）的特点：

顶部与底部的bar不管分辨率怎么变，它的度和位置都不变；  中间每条招聘信息不管分

辨率怎么变，招聘公司的图标等信息 都位于条目的左边，薪资都位于右边

等比缩放布局(rem布局)—网易、淘宝首页

什么是屏幕尺寸？

移动端屏幕尺寸:屏幕对角线的长度，单位是英寸(1英寸=254厘米)。

常见的尺寸有：24，28，35，37，42，50，55，60

什么是屏幕分辨率？

屏幕分辨率：指横纵方向上的像素点数，单位为px,1px=1个像素点。

一般以纵向像素横向像素表示 一个手机的屏幕分辨率。如：19601080

这里的一个像素是指物理设备的一个像素点。

什么是屏幕像素密度？

屏幕像素密度：屏幕上每英寸可以显示像素点的数量，单位是ppi(pixels  per inch)缩

写。

iphone3GS和iphone4区别：屏幕尺寸一样，屏幕分辨率相差一倍，屏幕像素密度也相差一倍数。

PX:像素，将显示器分成非常细小的方格，每一个方格就是1px。

注:(网页重构中使用的px 和屏幕分辨率的px不一定是一样的大小)。

实际上像素分为两种：设备像素和逻辑像素（ CSS像素）

DPR：设备像素比DPR(devicePixelRa嫧o)是默认缩放为100%的情况下，设备像素和CSS像素的

比值

在早先的移动设备中，并没有DPR的概念。随着技术的发展，移动设备的屏幕像素密度越来

越高。从iphone4开始苹果公司推出了所谓的re嫧na视网膜屏幕。之所以叫做视网膜屏幕，是

因为屏幕的PPI(屏幕像素密度)太高，人的视网膜无法分辨出屏幕上的像素点。iphone4的分

辨率提高了一倍，但屏幕尺寸却没有变化，这意味着同样大小的屏幕上，像素多了一倍，于

是DPR = 2

1rem是什么

rem(font size of the root element)是指相对于根元素的字体大小的单位。

2为什么web app要使用rem？

实现强大的屏幕适配布局(淘宝,腾讯,网易等网站都是rem布局适配)rem能等比例适配所有屏

幕,根据变化html的字体大小来控制rem的大小,

vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%。

vh：viewpoint height，视窗高度，1vh等于视窗高度的1%。

vmin：vw和vh中较小的那个。

vmax：vw和vh中较大的那个。

vw, vh, vmin, vmax：IE9+局部支持，chrome/firefox/safari/opera支持，iOS safari 8+支持，

Android browser44+支持，chrome for android39支持

1rem

rem是指相对于根元素的字体大小的单位。

2根元素

如果根元素是相对设备尺寸自动变换。

3VW

视窗宽度，1vw等于视窗宽度的1%。

4VW转换成PX赋值给font‐size

例：设备的分辨率为6401136，逻辑像素为320568     1VW=32px

Font-size:100px;转换成VW    font‐size:3125vw;

1rem=3125vw可一起结合写等比例缩放布局。

1px

px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

2em

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被

人为设置，则相对于浏览器的默认字体尺寸。  

3rem

rem是指相对于根元素的字体大小的单位。

4VW

视窗宽度，1vw等于视窗宽度的1%。

以上就是关于前端面试题，移动端兼容问题有哪些，安卓和ios问题全部的内容，包括:前端面试题，移动端兼容问题有哪些，安卓和ios问题、移动端布局、手机屏幕尺寸(rem,vw,vh)及分辨率、等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！