页面布局方案

例如：对于DPR=2的Retina屏幕而言1个位图像素对应于4个物理像素，由于单一位图像素不可再分割，所以只能就近取色，从而导致模糊。所以对于清晰度问题，较好的方案是提供两倍图 @x2 。

像素密度表示设备屏幕能够显示的设备独立像素DIP的数量，屏幕显示的像素数量越多画面也就越精细，同时同样屏幕区域能够显示的信息也就越多。

屏幕由像素点组成，每个像素点发出不同颜色的光，进而构成界面。而屏幕的物理尺寸与像素尺寸是不成比例的。不同尺寸的手机屏幕拥有不同的分辨率，分辨率实际上是手机像素的宽高尺寸。

像素密度（pixels per inch,PPI或DPI）表示每英寸长度上排列的设备独立像素点DIP的个数，1英寸等于253厘米。像素密度PPI越高则表示屏幕分辨率越高进而屏幕显示越精细。Retine屏幕比普通屏幕清晰的原因，是因为它的像素密度是普通屏幕的数倍。

例如：35英寸的iPhone手机屏幕

日常所说的屏幕尺寸，实际是指屏幕对角线的长度。计算像素密度首先需要计算设备屏幕对角线等效像素，然后除以对角线长度。例如HTC G7分辨率为480x800，37英寸，计算出像素密度为252PPI。

像素密度PPI = 平方像素宽加平方像素高之和开平方的结果，再除以屏幕对角线的英寸数。

密度决定比例

通过计算像素密度PPI可以得知设备屏幕属于哪个密度区间，因为不同密度区间对应着不同的默认缩放比例。

通俗来说视区 Viewport 就是浏览器上用来显示页面的区域，也就是说，浏览器的实际宽度和手机宽度不一样，无论手机宽度是320px或640px，在手机浏览器内部宽度始终会是浏览器本身的视区。

现代浏览器都会给自身的视区提供一个默认值，大多会以980px或1024px为主。在移动端视区默认一般来说是会大于手机屏幕的，所以当在桌面浏览器正常显示的页面，会以960px设计主区域。放到移动端就会出现横向滚动条，因此会专门会给浏览器设计移动端的页面。

移动端浏览器会将页面放在一个虚拟的窗口 viewport 中，通常这个虚拟的窗口会比屏幕宽，这样就不用将每个页面挤到很小的窗口中，以防止破坏没有针对手机浏览器优化的网页布局，用户可以通过平移或缩放来查看页面中的不同部分。

页面中视区 viewport 是可绘制的区域，虽然视区的可视面积和屏幕尺寸相匹配，但视区页由自己的尺寸，用来确定页面中的像素数量。

在 iPhone 和 Android 平台中 WebKit 内核的历览器使用980像素宽的视见区或逻辑尺寸，相当于viewport中的width=980px。当页面加载后，页面内容通常被完全缩放以便整个页面都可见，尽管内容会被缩放的非常小且不可读。

在Web页面中，可通过JS动态获取相关参数。

根据目前市场主流移动终端，统计设备独立像素后，移动端H5设计稿推荐尺寸为640 x 1136、750 x 1334。

除去浏览器全屏显示，几乎所有情况下均会存在顶部状态栏和导航栏。根据iPhone标准，状态栏和导航栏的独立像素高度分别为40px和88px。Android平台可以更改状态和导航栏高度可取默认值48px和100px为准。在网页中就会将页面内容向下挤入盲区，根据不同的布局方式可能会挤出视口，也就是可视区域之下。因此取两个平台的最大值148。因此设计稿要尽量保证单页下没有重要内容。如果要在所有屏幕上将重要内容显示完全，需要注意市面上存在的小尺寸屏幕，绝对部分智能机分辨率在640 x 960之上，因此只要重要内容放在盲区之上即可。计算出的最安全高度为812 = 960 - 148。

简单来说视区 Viewport 是严格等于浏览器的窗口，在桌面浏览器中视区就是浏览器窗口的宽高，但在移动设备上由于视区太窄，为了更好的为 CSS 布局服务，所以提供了两个视区，分别是可见视区 Visual Viewport 和布局视区 Layout Viewport 。

如果将移动设备浏览器的可视区域设置为Viewport，某些网站会因为Viewport太窄而显示错乱，所以浏览器会默认将Viewport设置为一个较宽的值，比如980px，使得为桌面浏览器设计的网站也能在移动设备浏览器上正常显示。这个浏览器默认的Viewport也就是Layout Viewport布局视区。布局视区的宽度可以使用JavaScript的 documentdocumentElementclientWidth 获取。移动设备中默认的视区就是Layout Viewport。

布局视区的宽度是大于浏览器可视区域的宽度的，因此需要一个Viewport来表示浏览器可视区域大小，这个Viewport也就是可见视区Visual Viewport，可见视区可使用JavaScript的 documentdocumentElementinnerWidth 获取。

Ideal Viewport是一个能完美适配移动设备的Viewport，首先无需缩放和横向滚动条就能正常查看页面所有内容，其次显示的文字、大小合适。比如14px的文本不会因为一个高密度像素的屏幕而显示的太小或无法看清。无论在何种密度屏幕、何种分辨率下，显示出来的大小都差不多，这个Viewport也就是Ideal Viewport。

Ideal Viewport并没有一个固定的尺寸，不同的设备拥有不同的尺寸。比如在IPhone设备中Ideal Viewport宽度是320px，无论屏幕宽度是320还是640的。Ideal Viewport的意义在于，无论在何种分辨率下，针对Ideal Viewport而设计的页面无需缩放和横向滚动条都可以完美地呈现给用户。

移动设备中默认的视区是Layout Viewport，在进行移动设备页面开发时则需要Ideal Viewport。要得到完美视区，需设置 meta 标签。

该 meta 标签的作用是让当前视区宽度等于设备宽度，同时不允许用户手动缩放。 minimum-scale=10 与 maximum-scale=10 并不是必需的。但 width = device-width 则是必须的，以保证不会出现横向滚动条。

width 能够控制默认布局视区Layout Viewport的宽度，若不指定则默认会是980px或1024px，这个值会由设备自身所决定。当把布局视区宽度设置为移动设备宽度 width = device-width 时，此时布局视区将会变成完美视区。

其实要将当前视区宽度设置为完美视区宽度，既可以设置 width = device-width 也可以设置 initial-scale = 10 ，但是单单设置 width = device-width 会导致iPhone、iPad设备中横竖屏不分，单单设置 initial-scale = 10 则会导致IE中横竖屏不分。所以都以竖屏的完美视口宽度为标准，最完美的写法时两则都写上去， width = device-width 解决iPhone、iPad缺陷， initial-scale = 10 则解决IE的缺陷。

CSS3新增视区单位vm和vh，在移动端iOS8+和Android44+获得支持。

设备像素比定义了物理像素与设备独立像素之间的对应关系，计算公式为：设备像素比 = 物理像素 / 设备独立像素。

在CSS中可通过以下方式进行媒体查询，针对不同DPR设备做出样式适配。

在JavaScript中可通过 windowdevicePixelRatio 获取当前设备的DPR。

在Ratina高清设备屏幕中一个CSS像素对应4个物理像素

Web页面设置视口后，页面与屏幕是1:1显示，移动设备都具有设备像素比 DPR ，当DPR=2时移动设备上的一个CSS像素由4个物理像素点组成。

安卓客户端限制了 viewport 设置的缩放属性，让客户端放开限制就行，但是由于市场上的app版本还是不支持，所以需要做兼容性处理。

iPhone6 上有1px 的滚动条，最后处理方案是通过 viewport 中的 maximum-scale 的值加了01，由于设置了user-scalable=no，maximum-scale 的值加01并不会有什么影响。

通过JS动态获取移动设备的设备像素比，通过设备像素比来计算并设备Web页面中 html 标签的字体大小 font-size 以及缩放比例。

例如：动态设置 html 的font-size, 同时根据设备DPR调整页面的缩放值，进而达到高清效果。

rem 全称 font size of the root element 是指相对于根元素的字体大小的相对单位，计算规则依赖于根元素。

rem 是通过根元素进行适配的，web中根元素是指 html ，所以通过设置 html 的字体大小即可控制 rem 的大小。

REM布局的核心是设置好根 html 元素的字体大小 font-size ，为了防止在高清屏下像素不够用而导致模糊，当拿到移动设计稿时，移动设计稿一般会以iPhone5设备宽320px或iPhone6设备宽375px为基准，制作出两倍宽的设计稿，即640px或750px。

例如：设置 html 标签的 font-size:10px ，6rem即610px。

rem 适用于WebApp，出于兼容性考虑，WebApp下使用 rem 更加能凸价值和功能。

使用CSS的媒体查询控制

移动UI设计稿会采用iPhone宽度作为标准

使用JS控制Web页面文字大小使其自适应屏幕

使用 rem 布局的本质是等比缩放，一般是基于宽度。

将屏幕宽度均分100份，每一份的宽度使用x表示，即x=屏幕宽度/100，如果将x作为单位，x前面的数值代表屏幕宽度的百分比。想要屏幕元素随着屏幕宽度等比缩放，只需要确定x单位，可通过CSS3中的 rem 来实现。可通过JS设置HTML字体大小等于屏幕宽度的百分之一。

若UE设计稿宽度尺寸为640px，设计稿中某元素宽度为100px，则可以计算出100 / 640px 100px = 15625。

最佳实践：px2rem移动端自适应方案 >

webviewaddjavascriptinterface可以调用android代码

android可以获得屏幕高度

DisplayMetrics dm = new DisplayMetrics();

getWindowManager()getDefaultDisplay()getMetrics(dm);

int height = dmheightPixels//这个就是屏幕高度了。

webViewaddJavascriptInterface(new WebAppInterface(this), "Android");

这个就创立了一个接口名，叫“Android”，运行在WebView中的JS代码可以通过这个名字调用WebAppInterface类中的showToast()方法：

<input type="button" value="Say hello" onClick="showAndroidToast('Hello Android!')" />

<script type="text/javascript">

function showAndroidToast(toast)

{

AndroidshowToast(toast);

}

</script>

Android中可以通过三种方式获到屏幕大小：

1、通过WindowManager获取

DisplayMetrics dm = new DisplayMetrics();

getWindowManager()getDefaultDisplay()getMetrics(dm);

Systemoutprintln("heigth : " + dmheightPixels);

Systemoutprintln("width : " + dmwidthPixels);

2、通过Resources获取

DisplayMetrics dm2 = getResources()getDisplayMetrics();

Systemoutprintln("heigth2 : " + dm2heightPixels);

Systemoutprintln("width2 : " + dm2widthPixels);

3、通过Display 获取屏幕的默认分辨率

Display display = getWindowManager()getDefaultDisplay();

Systemoutprintln("width-display :" + displaygetWidth());

Systemoutprintln("heigth-display :" + displaygetHeight());

JavaScript 获取客户端计算机硬件及系统信息

通过WMI来实现获取客户端计算机硬件及系统信息:

复制代码代码如下:

function getSysInfo(){

var locator = new ActiveXObject ("WbemScriptingSWbemLocator");

var service = locatorConnectServer("");

//CPU信息

var cpu = new Enumerator (serviceExecQuery("SELECT FROM Win32_Processor"))item();

var cpuType=cpuName,hostName=cpuSystemName;

//内存信息

var memory = new Enumerator (serviceExecQuery("SELECT FROM Win32_PhysicalMemory"));

for (var mem=[],i=0;!memoryatEnd();memorymoveNext()) mem[i++]={cap:memoryitem()Capacity/1024/1024,speed:memoryitem()Speed}

//系统信息

var system=new Enumerator (serviceExecQuery("SELECT FROM Win32_ComputerSystem"))item();

var physicMenCap=Mathceil(systemTotalPhysicalMemory/1024/1024),curUser=systemUserName,cpuCount=systemNumberOfProcessors

return {cpuType:cpuType,cpuCount:cpuCount,hostName:hostName,curUser:curUser,memCap:physicMenCap,mem:mem}

}

代码实现主要包括这几部分：

先通过new ActiveXObject ("WbemScriptingSWbemLocator"); 访问到WbemScripting对象。

通过locatorConnectServer("");连接我们本地电脑（代表本地电脑，当然

也可以访问其他计算机）。

通过serviceExecQuery("SELECT FROM Win32_Processor")这个类似sql的语句（其实系统信息也是存储在计算中一个类似数据库的文件中）获取我们需要的对象的记录集。

通过new Enumerator来创建一个可枚举的对象，下面就可以遍历取信息了。

注意：运行的前提是要修改浏览器安全设置，“允许对未标记为可安全执行的ActiveX

脚本的运行”。

  对于前端开发者来说，要处理这个问题，必须先补充一个知识点，就是设备的 物理像素[设备像素] & 逻辑像素[CSS像素] ；在我的另外一片文章 设计稿的100%还原 做了介绍，感兴趣的朋友可以查阅一下。

  为什么移动端CSS里面写了1px，实际上看起来比1px粗；了解设备物理像素和逻辑像素的同学应该很容易理解，其实这两个 px 的含义其实是不一样的，UI设计师要求的1px是指设备的物理像素1px，而CSS里记录的像素是逻辑像素，它们之间存在一个比例关系，可以用javascript中的 windowdevicePixelRatio 来获取，也可以用媒体查询的 -webkit-min-device-pixel-ratio 来获取。当然，比例多少与设备相关。

在手机上border无法达到我们想要的效果。这是因为devicePixelRatio特性导致，iPhone的devicePixelRatio==2，而border-width: 1px描述的是设备独立像素，所以，border被放大到物理像素2px显示，在iPhone上就显得较粗。

  移动端开发常需要在html的header里添加如下一句：

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

  这句话定义了本页面的 viewport 的宽度为设备宽度，初始缩放值和最大缩放值都为1，并禁止了用户缩放。

  你的疑问可能来了，老是看到 viewport ，除了知道中文名叫 视口 ，到底是啥意思？其实，它就是设备屏幕上能用来显示我们网页内容的那一块区域，具体点就是浏览器或app中的webview用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，可能大也可能小。体现在用户是否缩放了屏幕。

  心细的同学应该都有感觉，meta标签中常设置 user-scalable=no 也就是禁止用户缩放，那用户缩放到底会造成什么影响呢？ 其实也就是显示上的变化。缩放一倍，CSS像素(逻辑像素)所代表的物理像素也就缩放了一倍，即设备物理像素和设备独立像素的比例增大(减小)了一倍。

  或许你已经明白1px变粗的原因是啥了， viewport的设置和屏幕物理分辨率是按比例而不是相同的 移动端window对象有个devicePixelRatio属性, 它表示设备物理像素和css像素的比例, 在retina屏的iphone手机上, 这个值为2或3, css里写的1px长度映射到物理像素上就有2px或3px那么长。

 

  IOS8下已经支持带小数的px值, media query 对应 devicePixelRatio 有个查询值 -webkit-min-device-pixel-ratio , css可以写成这样

缺点 对设备有要求，小数像素目前兼容性较差。

  该方案是对上述方案的优化，整体思路就是利用 viewport + rem + js 动态的修改页面的缩放比例，实现小于1像素的显示。在页面初始化时，在头部引入原始默认状态如下：

接下来的任务就是js的动态修改缩放比 以及 实现rem根元素字体大小的设置。

缺点 以为缩放涉及全局的rem单位，比较适合新项目，对于老项目可能要涉及到比较多的改动。

解释 border-width 指定边框的宽度，可以设定四个值，分别为上右下左 border-width: top right bottom left 。

border-image 该例意为：距离上方2px（属性值上没有单位）裁剪边框作为上边框，下方2px裁剪作为下边框。距离左右0像素裁剪即没有边框，以拉伸方式展示

结合起来就是： 在边框中，裁剪上下方的2个像素宽度作为上下边框，并展示在宽度为1个像素的边框空间里。左右没有边框。 注意这里的1个像素是特殊的，专指物理像素，而平时设定的长宽1px则表示逻辑像素（该观点为个人理解）。

当然，这种方式引入了，我们还能将装换成base64形式表现

缺点 需要制作，圆角可能出现模糊

  除了使用外，当然也能使用纯css来实现，百度糯米团就是采用的这种方案。

思路 将原本1个物理像素的边框大小利用线性渐变分割成几个部分（百分比控制），实现小于1像素效果

解释 linear-gradient 指定线性渐变，接受大于等于3个参数，第一个为渐变旋转角度，第二个开始为渐变的颜色和到哪个位置（百分比）全部变为该颜色，该例子中，第一句就是， 渐变方向旋转180度，即从上往下（默认为0度从下往上），从红色开始渐变，到50%的位置还是红色，再渐变为继承父元素颜色。

缺点 因为每个边框都是线性渐变颜色实现，因此无法实现圆角

 

利用阴影也可以实现，优点是没有圆角问题，缺点是颜色不好控制

理解 来回顾一下 box-shadow 属性的用法。

参数分别表示: 水平阴影位置，垂直阴影位置，模糊距离， 阴影尺寸，阴影颜色，将外部阴影改为内部阴影 ，后四个可选。该例中为何将阴影尺寸设置为负数？设置成 -1px 是为了让阴影尺寸稍小于div元素尺寸，这样左右两边的阴影就不会暴露出来，实现只有底部一边有阴影的效果。从而实现分割线效果（单边边框）。

 

  在以上的用法种，无非逃不开一种思想，就是将1px缩小为05px来展示，然而。05px并不是所有的设备或浏览器都支持，就考虑用媒体查询或viewport将其缩放比例。其实1像素问题的产生基本发生在设置边框或分割线的时候，场景并不覆盖全局样式，因此，直接缩放需要设置的元素，才是我们真正需要的。 tranform 就能实现这个需求。

2用 ::after 和 ::befor ,设置 border-bottom：1px solid #000 ,然后在缩放 -webkit-transform: scaleY(05); 可以实现两根边线的需求

3用 ::after 设置 border：1px solid #000; width:200%; height:200%, 然后再缩放 scaleY(05); 优点可以实现圆角，京东就是这么实现的，缺点是按钮添加 active 比较麻烦。

 

  解决方案主要提供一个思路，具体实现还需要自己手动尝试。欢迎交流共进。

在H5页面的开发中，肯定会遇到获取手机的型号等需求，使用js的navigator对象，能获取到有关浏览器的相关信息，但想获取手机使用的系统等更多内容还是有局限性的。

在网上搜到一个好用的获取手机型号和系统的插件 mobile-detectjs

2引用mobile-detectjs

实例化一个MobileDetect

在浏览器中使用三星模拟器测试可以打印安卓型号 50:

使用iphone打印iphone型号ios11:

这个还是不能准确定位使用的是什么型号的手机，但可以通过返回的信息判断使用的是安卓还是苹果的，比如苹果结合获取设备屏幕大小和io系统的型号就可以判断出使用的是什么iphone手机，至于安卓手机类型比较多，就要复杂很多啦，大家知道的可以相互分享啊。

物理像素[设备像素] & 逻辑像素[CSS 像素]

拿2倍屏来说，设备的物理像素要实现1像素，而DPR=2，所以css 像素只能是 05。一般设计稿是按照750来设计的，它上面的1px是以750来参照的，而我们写css样式是以设备375为参照的，所以我们应该写的05px就好了啊！ 试过了就知道，iOS 8+系统支持，安卓系统不支持。

在浏览器中无法设置小于 1px 的边框 设置了也不会生效

设计师要求的 1px 是指设备的物理像素 1px，而 CSS 里记录的像素是逻辑像素，它们之间存在一个比例关系，可以用 javascript 中的 windowdevicePixelRatio 来获取。当然，比例多少与设备相关。

移动端开发常需要在 html 的 header 里添加如下一句：

设备像素比 = 物理像素 / css 像素

核心思想就是设置 1px 大小 然后将 1px 缩小为 05px 来展示

IOS8 下已经支持带小数的 px 值, media query 对应 devicePixelRatio 有个查询值-webkit-min-device-pixel-ratio, css 可以写成这样

缺点对设备有要求，小数像素目前兼容性较差。

pixel-bordercss 这个工具库就是用来解决移动端 1px 边框的问题，用到的思想和我下面写的一致

pixel-bordercss

该方案是对上述方案的优化，整体思路就是利用 viewport + rem + js 动态的修改页面的缩放比例，实现小于 1 像素的显示。在页面初始化时，在头部引入原始默认状态如下：

接下来的任务就是 js 的动态修改缩放比 以及 实现 rem 根元素字体大小的设置。

缺点以为缩放涉及全局的 rem 单位，比较适合新项目，对于老项目可能要涉及到比较多的改动。

可能你会问为什么在3倍屏下，不是03333px 这样的？经过我测试，在Chrome上模拟iPhone 8Plus，发现小于046px的时候是显示不出来。

以上就是关于页面布局方案全部的内容，包括:页面布局方案、html js获取手机朝向问题、android 开发中 怎么用js获取手机屏幕高度等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！