HTML5移动端viewpoint视口,移动端屏幕与视口

屏幕像素

px(pixels)：物理像素，硬件像素，设备像素

dp,dip(deveice independent pixels)：逻辑像素、设备无关像素、CSS像素

pt(point)：1/72英寸

dpr(devicePixelRatio): 设备像素缩放比，即 1dp的长度相当于几个px的长度

ppi,dpi：像素密度(像素每英寸)，斜向一英寸里的物理像素数量

em: 相对于父元素的font-size的相对单位。

rem: 相对于根元素的font-size的相对单位。

vw: 1% 布局视口宽度

vh: 1% 布局视口高度

分辨率：横向物理像素数 * 纵向物理像素数

iPhone5为例

物理像素：640 * 1136。屏幕尺寸：4英寸。对角线物理像素数：开根号(1136 * 1136 + 604 * 640) = 1304。ppi = 1304 / 4 = 326。默认dpr：2。逻辑像素：568 * 320

ppi与默认dpr对应关系：(规律：每英寸里面的点越多，让越多的点来充当一个px)

ppi   默认dpr

ldpi   120   0.75

mdpi   160   1.0

hdpi   240   1.5

xhdpi  320   2.0

Retina屏(视网膜屏): ppi 大于320

视口与缩放

布局宽度：布局视口的逻辑像素的数量

屏幕宽度：屏幕的逻辑像素的数量(视觉视口、可见视口、虚拟视口)

逻辑宽度：逻辑像素的数量

视觉宽度：横向长度

chrome 实验结论：桌面浏览器设置viewport无效，但可以手动缩放。移动浏览器设置viewport有效，但也能手动缩放。

桌面浏览器以屏幕宽度进行布局，手动缩放，相当于改变dpr，以缩小为例：

1、缩小后，dpr变小，

viewport的视觉宽度不变，逻辑宽度变大

2、缩小后，百分比宽度的元素，百分比仍然生效，逻辑宽度和视觉宽度跟着父元素变化。默认情况下，是viewport的 100%，因此的视觉宽度不变，逻辑宽度变大。

3、缩小后，固定宽度的元素，逻辑宽度不变，视觉宽度缩小。

4、文字无法无限缩小，缩小到一定程度后继续缩小，视觉宽度不变，dpr变小，逻辑宽度变大。

总结：缩小，dpr变小；元素逻辑宽度不变，视觉宽度变小；视觉宽度不能变小的(viewport,百分比宽度的元素，小字)，视觉宽度不变，逻辑宽度变大。

移动浏览器viewport设置initial-scale缩放。以缩小为例

1、viewport的逻辑宽度和视觉宽度初始都为width，逻辑宽度不变，视觉宽度以initial-scale缩小；视觉宽度缩小到跟屏幕一样宽时，不再缩小，变成逻辑宽度变大，视觉宽度不变。

2、百分比宽度的元素，变化规律跟viewport一样

3、固定宽度的元素，逻辑宽度不变，视觉宽度缩小。

4、无法缩小到文字不能再缩小的程度

总结：viewport视觉宽度缩小到屏幕宽度之前，viewport、百分比宽度元素、固定宽度元素，都是逻辑宽度不变，视觉宽度以同等比例缩小。

移动浏览器手动缩放

不分viewport、百分比宽度元素、固定宽度元素，全都是视觉宽度缩放，逻辑宽度不变。

viewport 设置

width：布局宽度，相当一部分手机浏览器默认为 980px

deveice-width：屏幕宽度

initial-scale：初始缩放比例

mininum-scale：最小缩放比例

maximum-scale：最大缩放比例

user-scalable：是否允许用户缩放

情况一：未设置

那么布局宽度width=980px，初始缩放initial-scale为自动(缩放到屏幕大小)

情况二：viewport只设置width，不设置initial-scale

那么initial-scale为自动

情况三：viewport只设置initial-scale=1，不设置width

那么width=device-width

情况四：viewport只设置initial-scale !=1，不设置width

那么Android width=980px，IOS width=device-width

视口与JS

screen.width  屏幕的逻辑像素的数量

window.innerWidth 浏览器的逻辑像素的数量(包含滚动条占据的宽度)

document.documentElement.clientWidth   viewport的逻辑像素的数量

document.documentElement.offsetWidth 根元素的逻辑像素的数量

window.pageX/YOffset布局视口相对于可见视口的位移

window.devicePixelRatio  屏幕dpr

orientationchange  屏幕转向事件

屏幕适配方案一

var dpr, rem, scale;

var docEl = document.documentElement;

var fontEl = document.createElement('style');

var metaEl = document.querySelector('meta[name="viewport"]');

scale = 1 / dpr;

dpr = win.devicePixelRatio || 1;

rem = docEl.clientWidth * dpr / 10;

// 设置viewport，进行缩放，达到高清效果

metaEl.setAttribute('content', 'width=' + dpr * docEl.clientWidth + ',

initial-scale=' + scale + ',maximum-scale=' + scale + ',

minimum-scale=' + scale + ',user-scalable=no');

// 设置data-dpr属性，留作的css hack之用

docEl.setAttribute('data-dpr', dpr);

// 动态写入样式

docEl.firstElementChild.appendChild(fontEl);

fontEl.innerHTML = 'html{font-size:' + rem + 'px!important;}';

// 给js调用的，某一dpr下rem和px之间的转换函数

window.rem2px = function(v) {

v = parseFloat(v);

return v * rem;

};

window.px2rem: function(v) {

v = parseFloat(v);

return v / rem;

};

window.dpr = dpr;

window.rem = rem;

1、设置viewport，width = 屏幕宽度 * dpr，缩小到 1 / dpr

这种设置，使得布局视口的视觉宽度吻合屏幕宽度，固定宽度元素、百分比宽度元素都能等比例缩小，同时能解决border：1px问题。

2、设置，font-size = 屏幕宽度 * dpr / 10，作为1rem(基准尺寸)

3、设置，data-dpr = dpr

4、原型稿px尺寸转rem尺寸，使得元素所占屏幕比例，在不同屏幕上都能保持一致

// 用less mixin 自动处理，以750px原型稿为例

.px2rem(@name,@px){

@{name}:@px/ 75 * 1rem;

}

用法 .px2rem(width, 750);

5、原型稿px尺寸 转 不同dpr屏幕上的 px尺寸，使得 元素在不同屏幕上显示的视觉大小保持一致。

.px2px(@name,@px){

@{name}:round(@px/ 2) *1px;

[data-dpr="2"] & {

@{name}:@px* 1px;

}

// for mx3

[data-dpr="2.5"] & {

@{name}:round(@px* 2.5 / 2) *1px;

}

// for 小米note

[data-dpr="2.75"] & {

@{name}:round(@px* 2.75 / 2) *1px;

}

[data-dpr="3"] & {

@{name}:round(@px* 3 / 2) * 1px

}

// for 三星note4

[data-dpr="4"] & {

@{name}:@px* 2px;

}

}

用法 ..px2px(font-size, 32)

6、字号不使用rem，确保是整数px。

.fontsize(@size) {

font-size:@size/ 2 * 1px;

[data-dpr="2"] & {

font-size:@size* 1px;

}

[data-dpr="3"] & {

font-size:@size*1.5* 1px;

}

}

7、不同dpr 引用不同清晰度的图片

屏幕适配方案二

的 font-size 为

document.documentElement.clientWidth / 10

与方案一相比，不能解决border：1px 问题。

屏幕适配方案三

// 这个设置会使布局宽度放大dpr倍

viewport.setAttribute('content','width=device-width,initial-scale='+ 1 / dpr);

//document.documentElement.clientWidth 是放大后的布局宽度

document.documentElement.style.fontSize= document.documentElement.clientWidth/ 10+ 'px';

方案一，

viewport的视觉宽度处在缩小到屏幕宽度之前，逻辑宽度不变，视觉缩小到屏幕宽度；方案三，viewport的视觉宽度处在缩小到屏幕宽度之后，视觉宽度不变，逻辑宽度变大。两种方案，最终都达到viewport 逻辑宽度 = 屏幕宽度 * dpr，viewport 视觉宽度 = 屏幕宽度

1rem = 缩放后 viewport 逻辑宽度 / 10