移动端CSS的10个基本知识点阅读:5239 次 编辑日期:2013-11-08 目录:概述:
现在的生活中,手机应用软件占据了大家的手机屏幕,但是这些软件的制作过程跟PC端的制作过程有什么不一样呢?其实差别还是有不少的,我们先来小解密一下。
关于PPI/DPI:
PPI(Pixels per inch)也叫DPI(Dots Per Inch),表示的是每英寸所拥有的像素(pixel)数目。数值越高,代表显示屏能够以越高的密度显示图像,说白了,PPI/DPI越高,越清楚。
所以在开发APP的时候图片的文件夹(images)中会有多个文件夹,里面的图片是一样的,但是对应的是不同DPI的手机,例如dpi1.5,dpi2.0,dpi3.0等等。
适用于手机浏览器的DTD:
viewport 语法:
(1)width:设制 viewport 的宽,可以设定一个值(320)或者特殊的值(device-width)为设备的宽度,device-width是可定义输出设备的屏幕可见宽度。
(2)height:同上,只不过为设置高。 (3)initial-scale:初始缩放值,是个浮点数,例如这个值为1.0那么页面就会以页面分辨率的1:1来显示,要是2.0,就会以页面分辨率的2:0来显示,也就是放大两倍。 (4)maximum-scale:最大缩放度,是个浮点数,例如这个值为1.0那么页面就只能是原比例不能缩放,要是2.0,页面也最大能缩放2倍。 (5)minimum-scale:同上,只不过为缩小。 (6)user-scalable:用户是否可以调整缩放。即用户是否能改变页面缩放程度。可设置为yes/no。默认值是yes。如果你将其设置为no,那么minimum-scale 和 maximum-scale都将被忽略,因为不会被缩放。 所以我们经常会在APP软件的HTML的页面的head中会看到这个一行:
format-detection的用处:
如何针对不同的分辨率写样式:
外联样式:
根据设备分辨率,设置外联样式:
根据分辨率的不同,会设有多个CSS,image文件夹,然后根据分辨率,自动选择文件夹。
关于拨打页面中电话问题:
大致有两种方法:
(1).把电话号码传给平台,吊取平台的拨打电话(这里不多讲)。 (2).在a标签的href中,插入tel:138****8888
placeholder 方法:
如果是在PC端,我们要是实现:一个input里面有默认value,input获取焦点的时候input清空,失去焦点的时候input恢复默认值的效果。
为了兼容性,应该只能用JS,但是在移动端,如果打开软件内置的浏览器的话,就不必在乎兼容性问题,恰好HTML5有了placeholder方法,它恰恰能解决刚刚我们要实现的问题:
获取焦点,input清空。失去焦点input显示“请输入问题”。
关于页面中 href="#":
如果是在PC端经常会用空链接"#",说是空链接其实是自动跳转到页面顶部,但是在移动端一定不要在a标签里面加入"#",这回导致页面无法触发事件。
关于iscroll中的css问题:
在使用iscroll的过程中,如果需要滚动区域距离底部有一段距离怎么办?因为iscroll实例化的是内部的第一个子元素,所以需要在这个子元素上面加入内联样式:style="padding-bottom:20px;"
|
|