设为首页 - 加入收藏 - 网站地图 - RSS订阅 村姑网-www.cunguer.com
当前位置:首页 > 网页制作 > CSS > 正文

纯CSS判断ipad等移动设备横版和竖版

时间:2015-12-05 21:37:54 来源:村姑网 作者:喜欢安静 阅读:
导读:使用过ipad等移动设备访问网页的朋友可能会好奇,如何用css判断此时访问者的显示设备是横版还是竖版来使用对应的css显示网页,其实这个用css来判断是很简单的,只需设置orientation(方向)的参数就可以了,可以取2个值:portrait(纵向、竖版)和landscape(横向...

使用过ipad等移动设备访问网页的朋友可能会好奇,如何用css判断此时访问者的显示设备是横版还是竖版来使用对应的css显示网页,其实这个用css来判断是很简单的,只需设置orientation(方向)的参数就可以了,可以取2个值:portrait(纵向、竖版)和landscape(横向)。可能有些新手朋友还不会,下面我们来举个例子,估计大家看完以下代码就可以完全理解了。

代码如下:

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>用css判断移动显示设备的横版和竖版</title>

<!--竖版本使用的样式-->

<style media="all and (orientation:portrait)" type="text/css"> //这里说明下面是竖版的显示效果

#landscape { display: none; }

body {background:red}

</style>

<!--横版本使用的样式-->

<style media="all and (orientation:landscape)" type="text/css">//这里说明下面是横版的显示效果

#portrait { display: none; }

body {background:green}

</style>

</head>

<body>

</body>

</html> 
  看完以上代码的示例,亲是不是觉得很简单呢?