Live App页面布局

一些知识

屏幕宽高比

  • 主流安卓720p手机 720/1280=0.5625
  • 主流安卓1080p手机 1080/1920=0.5625
  • 主流安卓1440p手机 1440/2560=0.5625
  • iPhone5 640/1136≈0.56
  • iPhone6 750/1334≈0.56
  • iPhone6P 1242/2208≈0.56 (实际运行分辨1080p)

查看更多

iPhone 的状态栏(信号电量栏)高度:40px

iPhone 微信的返回栏高度88px

  • 微信浏览器可视高度
    • iphone5 1136-40-88=1008px
    • iphone4 960-40-88=832px

关于dppx

dpr(Device Pixel Ratio 设备像素比)

上面所说的px是设备像素(Device Pixels),对于我们在web开发中接触到的是css 像素(CSS Pixel),retina屏幕出现以后,设备像素和css像素不再是1:1的关系.各厂家和平台通常会通过一个比值dpr将分辨率转换为一个较为便于开发的像素.打个比方说,iPhone5的设备像素是640x1136,它的dpr是2,所以在web页面的css计算中需要将640x1136除以2,按320x568计算

dppx: Number of dots per px unit. (每像素包含点的数量)

dppx在数值上等于dpr

查看更多设备的dppx

dpi

题外话,dpi是设备分辨率(Device Pixels)和设备物理尺寸(单位:英寸)之间的比值,跟我们web前端开发没有一毛钱关系,我们不要理它.


此分隔线以下所有内容均指css像素,不再讨论设备像素

极端宽高比

  • iPhone4 在微信浏览器中 320x416
  • iphone5 在safari桌面快捷方式中(无地址栏) 320x548


一些案例

有道云笔记 乱入学霸の世界

链接

  • 布局方式:流式布局
  • 向下兼容:主体部分高度不变

416
528

1
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
1
2
3
4
5
6
7
8
if(client_height<540 && client_height>500) {
$('body').addClass('hehe_screen');
}
if(client_height<420) {
$('body').addClass('very_low_screen');
} else if(client_height<500){
$('body').addClass('low_screen');
}
1
2
3
.very_low_screen .q_0_container {
margin-top: -150px;
}

淘宝网|万能时装屋

链接

  • 纯图片素材,无文字,无表单
  • 布局方式:采用百分比绝对定位
  • 向下兼容:尽量保持主要区域可见.可以看见对于高度极端不足的iphone4屏幕实际上是舍弃了(东西点不到)
  • 整个页面未写height属性,所有background-image容器均使用padding-bottom撑出高度

416
528

1
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0">
1
2
3
4
5
6
html, body {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}

1
2
3
4
5
6
7
8
.sprue {
position: absolute;
left: 18.06%;
top: .2%;
width: 82.28%;
padding-bottom: 156.25%;
background-size: cover;
}

(淘宝)男人爱车 没玩没了

链接

  • 纯图片
  • 固定宽度640
  • 定位:按像素绝对定位
  • 向下兼容:主要内容都在画面上半部分,下面的截掉了就截掉了无所谓
1
<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">

416
528

(京东)京东618 全民红包摇摇摇

链接

  • 图片+文字
  • rem
  • 向下兼容: 超出部分有内容则出滚动条,除此之外也是放任截掉
1
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

416
528

416
528

京东微信购物礼包

链接

  • 高度不固定
  • 流式布局
  • rem

计算<html>标签font-size的算法

1
2
3
4
5
6
7
8
9
10
!function(){
var cw=document.documentElement.clientWidth||document.body.clientWidth,zoom=cw/320;
if(cw>640)zoom=2;
document.write('<style id="htmlzoom">html{font-size:'+(zoom*50)+'px;}</style>');
window.addEventListener('resize',function(){
cw=document.documentElement.clientWidth||document.body.clientWidth,zoom=cw/320;
if(cw>640)zoom=2;
document.getElementById('htmlzoom').innerHTML='html{font-size:'+(zoom*50)+'px;}';
});
}();

京东微信购物1周年

链接

  • 绝对定位(像素)
  • 向下兼容:缩放
1
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
1
2
3
element.style {
zoom: 0.693333333333333;
}

416
528

总结

  1. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 强制页面全宽
  2. (设计)主要内容尽量放在页面靠上部分,至少兼容iPhone4s
  3. 流式布局用rem体验最佳
  4. 全图片页面可以考虑所有元素绝对定位