css3解决 html移动端浏览器横屏、竖屏样式问题

移动端横屏和竖屏展示的样式有很大差别,开发人员需要在客户切换时调整展示样式。

一般的移动端浏览器都支持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>

猜你喜欢

转载自blog.csdn.net/yanzi920403/article/details/53942065
今日推荐