最近更新
阅读排行
关注本站
移动端CSS的10个基本知识点
阅读：11942 次 编辑日期：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：
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
"http://www.wapforum.org/DTD/xhtml-mobile10.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中会看到这个一行：
（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中会看到这个一行：
<meta name="viewport" content="width=device-width,initial-scale=1.0,
maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
format-detection的用处：
<meta name="format-detection" content="telephone=yes"/ >
telephone的值可为yes/no，用来设置是否将网页上面的电话显示为可拨号码的超链接。
如何针对不同的分辨率写样式：
外联样式：
<link rel="stylesheet"
media="screen and (-webkit-device-pixel-ratio:1.5)"
href="../css/mdpibase.css"
/>
<link rel="stylesheet"
media="screen and (-webkit-device-pixel-ratio:2.0)"
href="../css/hdpibase.css"
/>
写在head中：
@media only screen and (-webkit-device-pixel-ratio:1.5){
#wrapper {
top:50px;
}
}
根据设备分辨率，设置外联样式：
根据分辨率的不同，会设有多个CSS，image文件夹，然后根据分辨率，自动选择文件夹。
<link rel="stylesheet"
media="screen and (-webkit-device-pixel-ratio:1.5)"
href="../css/mdpibase.css"
/>
<link rel="stylesheet"
media="screen and (-webkit-device-pixel-ratio:2.0)"
href="../css/hdpibase.css"
/>
关于拨打页面中电话问题：
大致有两种方法:
（1）.把电话号码传给平台，吊取平台的拨打电话（这里不多讲）。
（2）.在a标签的href中，插入tel：138****8888
（1）.把电话号码传给平台，吊取平台的拨打电话（这里不多讲）。
（2）.在a标签的href中，插入tel：138****8888
<a href="tel:13888888888"></a>
placeholder 方法：
如果是在PC端，我们要是实现：一个input里面有默认value，input获取焦点的时候input清空，失去焦点的时候input恢复默认值的效果。
为了兼容性，应该只能用JS，但是在移动端，如果打开软件内置的浏览器的话，就不必在乎兼容性问题，恰好HTML5有了placeholder方法，它恰恰能解决刚刚我们要实现的问题：
<input id="othertxt" type="search" placeholder="请输入问题" />
获取焦点，input清空。失去焦点input显示“请输入问题”。
关于页面中 href="#"：
如果是在PC端经常会用空链接"#"，说是空链接其实是自动跳转到页面顶部，但是在移动端一定不要在a标签里面加入"#",这回导致页面无法触发事件。
关于iscroll中的css问题：
在使用iscroll的过程中，如果需要滚动区域距离底部有一段距离怎么办？因为iscroll实例化的是内部的第一个子元素，所以需要在这个子元素上面加入内联样式：style="padding-bottom:20px;"
