ipad 竖版纯CSS判断ipad横版和竖版

最新推荐文章于 2021-08-04 00:09:04 发布

转载最新推荐文章于 2021-08-04 00:09:04 发布 · 117 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/chris-oil/archive/2013/04/12/3016386.html

文章标签：

#前端 #ViewUI

本文介绍了一种使用CSS媒体查询实现网页布局在竖版和横版方向自动切换的方法。通过检测设备的方向来改变网页背景颜色及元素显示状态，适用于需要根据不同设备方向调整布局的场景。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Link study</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>

转载于:https://www.cnblogs.com/chris-oil/archive/2013/04/12/3016386.html