移動端橫屏和豎屏展示的樣式有很大差別,開發人員需要在客戶切換時調整展示樣式。
一般的移動端瀏覽器都支持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>