為了應(yīng)對(duì)移動(dòng)設(shè)備屏幕的碎片化，我們?cè)陂_(kāi)發(fā)Mobile Web應(yīng)用時(shí)，一個(gè)最佳實(shí)踐就是采用流式布局，保證最大可能地利用有限的屏幕空間。由于屏幕存在著方向性，用戶(hù)在切換了屏幕的方向后，有些設(shè)計(jì)上或?qū)崿F(xiàn)上的問(wèn)題就會(huì)凸顯——我們至少需要處理一下當(dāng)前顯示元素的寬度的適配（當(dāng)然，要做的可能不僅僅是這個(gè)）。很多時(shí)候，我們需要為不同的屏幕方向來(lái)設(shè)計(jì)對(duì)應(yīng)的應(yīng)用顯示模式，這個(gè)時(shí)候，實(shí)時(shí)地獲知設(shè)備的模豎屏狀態(tài)就顯得極為重要。
window.orientation :這個(gè)屬性給出了當(dāng)前設(shè)備的屏幕方向，0表示豎屏，正負(fù)90表示橫屏（向左與向右）模式
onorientationchange : 在每次屏幕方向在橫豎屏間切換后，就會(huì)觸發(fā)這個(gè)window事件，用法與傳統(tǒng)的事件類(lèi)似
1：使用onorientationchange事件的回調(diào)函數(shù)，來(lái)動(dòng)態(tài)地為body標(biāo)簽添加一個(gè)叫orient的屬性，同時(shí)以body[orient=landspace]或body[orient=portrait]的方式在css中定義對(duì)應(yīng)的樣式，這樣就可以實(shí)現(xiàn)在不同的屏幕模式下顯示不同的樣式。如下代碼示例：
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0;">
<title>橫豎屏切換檢測(cè)</title>
<style type="text/css">
body[orient=landscape]{
background-color: #ff0000;
}
body[orient=portrait]{
background-color: #00ffff;
}
</style>
</head>
<body orient="landspace">
<div>
內(nèi)容
</div>
<script type="text/javascript">
(function(){
if(window.orient==0){
document.body.setAttribute("orient","portrait");
}else{
document.body.setAttribute("orient","landscape");
}
})();
window.onorientationchange=function(){
var body=document.body;
var viewport=document.getElementById("viewport");
if(body.getAttribute("orient")=="landscape"){
body.setAttribute("orient","portrait");
}else{
body.setAttribute("orient","landscape");
}
};
</script>
</body>
</html>2: 類(lèi)似的思路，不通過(guò)CSS的屬性選擇器來(lái)實(shí)現(xiàn)，如下代碼的實(shí)現(xiàn)方案：
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0;">
<title>橫豎屏切換檢測(cè)</title>
<style type="text/css">
.landscape body {
background-color: #ff0000;
}
.portrait body {
background-color: #00ffff;
}
</style>
</head>
<body orient="landspace">
<div>
內(nèi)容
</div>
<script type="text/javascript">
(function(){
var init=function(){
var updateOrientation=function(){
var orientation=window.orientation;
switch(orientation){
case 90:
case -90:
orientation="landscape";
break;
default:
orientation="portrait";
break;
}
document.body.parentNode.setAttribute("class",orientation);
};
window.addEventListener("orientationchange",updateOrientation,false);
updateOrientation();
};
window.addEventListener("DOMContentLoaded",init,false);
})();
</script>
</body>
</html>
這是一種更為方便的方式，使用純CSS就實(shí)現(xiàn)了對(duì)應(yīng)的功能，如下代碼演示：
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0;">
<title>橫豎屏切換檢測(cè)</title>
<style type="text/css">
@media all and (orientation : landscape) {
body {
background-color: #ff0000;
}
}
@media all and (orientation : portrait){
body {
background-color: #00ff00;
}
}
</style>
</head>
<body>
<div>
內(nèi)容
</div>
</body>
</html>
如果目標(biāo)移動(dòng)瀏覽器不支持media query，同時(shí)window.orientation也不存在，則我們需要采用另外一種方式來(lái)實(shí)現(xiàn)————使用定時(shí)器“偽實(shí)時(shí)”地對(duì)比當(dāng)前窗口的高(window.innerHeight)與寬(window.innerWidth)之比，從而判定當(dāng)前的橫豎屏狀態(tài)。如下代碼所示：
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0;">
<title>按鍵</title>
<style type="text/css">
.landscape body {
background-color: #ff0000;
}
.portrait body {
background-color: #00ffff;
}
</style>
<script type="text/javascript">
(function(){
var updateOrientation=function(){
var orientation=(window.innerWidth > window.innerHeight)? "landscape" : "portrait";
document.body.parentNode.setAttribute("class",orientation);
};
var init=function(){
updateOrientation();
window.setInterval(updateOrientation,5000);
};
window.addEventListener("DOMContentLoaded",init,false);
})();
</script>
</head>
<body>
<div>
內(nèi)容
</div>
</body>
</html>
將以上的兩種解決方案整合在一起，就可以實(shí)現(xiàn)一個(gè)跨瀏覽器的解決方案，如下代碼：
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0;">
<title>橫豎屏切換檢測(cè)</title>
<style type="text/css">
.landscape body {
background-color: #ff0000;
}
.portrait body {
background-color: #00ffff;
}
</style>
<script type="text/javascript">
(function(){
var supportOrientation=(typeof window.orientation == "number" && typeof window.onorientationchange == "object");
var updateOrientation=function(){
if(supportOrientation){
updateOrientation=function(){
var orientation=window.orientation;
switch(orientation){
case 90:
case -90:
orientation="landscape";
break;
default:
orientation="portrait";
}
document.body.parentNode.setAttribute("class",orientation);
};
}else{
updateOrientation=function(){
var orientation=(window.innerWidth > window.innerHeight)? "landscape":"portrait";
document.body.parentNode.setAttribute("class",orientation);
};
}
updateOrientation();
};
var init=function(){
updateOrientation();
if(supportOrientation){
window.addEventListener("orientationchange",updateOrientation,false);
}else{
window.setInterval(updateOrientation,5000);
}
};
window.addEventListener("DOMContentLoaded",init,false);
})();
</script>
</head>
<body>
<div>
內(nèi)容
</div>
</body>
</html>
原英文網(wǎng)址：http://davidbcalhoun.com/2010/dealing-with-device-orientation
以上所述是小編給大家介紹的Mobile Web開(kāi)發(fā)基礎(chǔ)之四--處理手機(jī)設(shè)備的橫豎屏問(wèn)題，希望對(duì)大家有所幫助！
聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2024 51dongshi.com 版權(quán)所有
違法及侵權(quán)請(qǐng)聯(lián)系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬(wàn)商天勤律師事務(wù)所王興未律師提供法律服務(wù)
