移动web开发琐碎知识
去慕课网看了一个系列视频,讲移动web开发的琐碎知识,记录一下
课程地址
像素 分辨率
问题:640*1136像素的区域,能否在iphone5(iphone5机器的分辨率为640*1136)上完全显示?
答案:不能。涉及到物理像素与逻辑像素的问题。
iphone5的640像素是物理像素,但是我们浏览器使用的px是逻辑像素。
几个单位定义:dp,pt 设备无关像素; dpr 设备像素缩放比。 1px = dpr^2 * dp; dpi 打印机每英寸可喷墨点,浏览器每英寸可显示的像素数; ppi屏幕每英寸像素数量,跟dpi其实一个意思,二者用的都是物理像素;
就iphone5来看, ppi = sqrt(1136^2+640^2)/4 = 326
。表示每英寸有326个像素,长度英寸(这里是对角线长度),不是面积平方英寸。
iphone5的xhdpi=320, dpr=2。retina屏幕的dpr是要大于等于2的。
viewport
问题:一个PC页面,会如何在手机上展示?
答案:默认情况下,iphone5会完整展示页面,而不是只显示屏幕大小的那部分。涉及到viewport的显示机制。
IOS的viewport宽度是980px,将页面放在这个viewport里,通过缩放完全展示出来。但android的viewport大小是不确定的。使用viewpot机制,是为了先让页面排版正确,然后再缩放。避免直接缩放在手机上产生排版错误。
visual viewport
人的视野viewport,上面那层,度量。layout viewport
底层的全部页面viewport,布局。
我们设计移动页面时,并不以设备的默认viewport大小进行开发,而是通过meta标签指定viewport大小。如下:
<meta name="viewport" content="name=value,name=value">
width=device-width
将viewport宽度设为设备宽度(逻辑宽度)。
initial-scale=1
缩放比设为1。 则布局viewport宽度和度量viewport宽度相同。
最常用的 width=device-width,initial-scale=1,user-scalable=no
。
然后有2种设计思路:
- 手机宽多少,就按多少来设计。
- 1px=1dp,设scale=0.5,则物理像素等于逻辑像素(针对缩放比为0.5的)。
响应式布局
flex布局可以解决一些头疼的响应式布局问题。
大概方法是,外层设为display:flex (可能要加内核前缀)
内层的项目 flex:1 flex:2
则一个1/3 一个2/3。
混合划分,左边图片设为width:100px
,右边文字flex:1
。
不定宽高的水平垂直居中,经典版:
.xx{
position:absolute;
top:50%;
left:50%;
-webkit-transform: translate(-50%,-50%);
}
flexbox版
.parent{
justify-content:center: //子元素水平居中
align-items:center;//子元素垂直居中
display:-webkit-flex;
}
IOS可以使用最新的flex布局。android4.4以下只兼容旧版的flexbox布局。只是css拼写方式不同。可以具体查阅相关手册。
课程给了一个DEMO,一目了然,感觉比网上将flex布局的其他文章要清晰许多。我放到自己博客里了,地址如下:
demo地址
css的media查询
现在设计手机页面,基本都得用到这个。根据实际屏幕大小来做不同的css样式。
百分比布局:仅适用媒体查询来使用不同的固定宽度设计,只会从一组css到另一组css。
弹性图片,max-width:100%;height:auto;
外层容器随浏览器大小改变。
另外,达到手机屏幕宽度时候,删掉一些元素。经常切换的元素,使用绝对定位。
高清图片,为了避免图片产生模糊,高宽应该使用物理像素单位渲染。比如dpr=2 则width=pic_width/2
。
一像素边框,1px其实是2个dp。所以要用0.5个dp。border-top:1px solid #ddd; -webkit-transform:sacleY(0.5);
用1px缩放了0.5;放到一个before伪类里面,可以当做边框使用。
移动web的点击事件
移动web的普通点击事件,响应要慢300ms,因为要判断是单击还是双击。所以要用tab事件代替click事件。但是tap事件不是原生的,需要自己实现或者用库,入zepto。
弹性滚动,body自带。如果要局部弹性滚动,则 overflow:scroll; -wekit-overflow-scrolling:touch;
android不支持。