最近更新
阅读排行
关注本站

移动端CSS的10个基本知识点

阅读:9372 次   编辑日期: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中会看到这个一行:
    <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
    <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;"
将本篇文章分享到:
top