移动端横屏和竖屏展示的样式有很大差别,开发人员需要在客户切换时调整展示样式。
一般的移动端浏览器都支持css3,这里我就用css3的方案来解决横竖屏的问题。
举个栗子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<style>
@media all and (orientation : landscape) {
h2{color:red;}/*横屏时字体红色*/
}
@media all and (orientation : portrait){
h2{color:green;}/*竖屏时字体绿色*/
}
</style>
</head>
<body>
<h2>jquerymobile 判断手机横屏竖屏</h2>
</body>
</html>