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>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章