BeWithYou

胡搞的技术博客

  1. 首页
  2. web前端/Javascript
  3. 移动web开发琐碎知识

移动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种设计思路:

  1. 手机宽多少,就按多少来设计。
  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不支持。

回到顶部