在移動(dòng)端中我們經(jīng)常碰到橫屏豎屏的問(wèn)題，那么我們應(yīng)該如何去判斷或者針對(duì)橫屏、豎屏來(lái)寫(xiě)不同的代碼呢。
首先在head中加入如下代碼：
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>針對(duì)上述viewport標(biāo)簽有如下說(shuō)明
1)、content中的width指的是虛擬窗口的寬度。
2)、user-scalable=no就一定可以保證頁(yè)面不可以縮放嗎？NO，有些瀏覽器不吃這一套，還有一招就是minimum-scale=1.0, maximum-scale=1.0 最大與最小縮放比例都設(shè)為1.0就可以了。
3)、initial-scale=1.0 初始縮放比例受user-scalable控制嗎？不一定，有些瀏覽器會(huì)將user-scalable理解為用戶(hù)手動(dòng)縮放，如果user-scalable=no，initial-scale將無(wú)法生效。
4)、手機(jī)頁(yè)面可以觸摸移動(dòng)，但是如果有需要禁止此操作，就是頁(yè)面寬度等于屏幕寬度是頁(yè)面正好適應(yīng)屏幕才可以保證頁(yè)面不能移動(dòng)。
5)、如果頁(yè)面是經(jīng)過(guò)縮小適應(yīng)屏幕寬度的，會(huì)出現(xiàn)一個(gè)問(wèn)題，當(dāng)文本框被激活（獲取焦點(diǎn)）時(shí)，頁(yè)面會(huì)放大至原來(lái)尺寸。
一：CSS判斷橫屏豎屏
寫(xiě)在同一個(gè)CSS中
@media screen and (orientation: portrait) {
/*豎屏 css*/
}
@media screen and (orientation: landscape) {
/*橫屏 css*/
}分開(kāi)寫(xiě)在2個(gè)CSS中
豎屏
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" rel="external nofollow" >橫屏
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css" rel="external nofollow" >二、JS判斷橫屏豎屏
//判斷手機(jī)橫豎屏狀態(tài)：
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
if (window.orientation === 180 || window.orientation === 0) {
alert('豎屏狀態(tài)！');
}
if (window.orientation === 90 || window.orientation === -90 ){
alert('橫屏狀態(tài)！');
}
}, false);
//移動(dòng)端的瀏覽器一般都支持window.orientation這個(gè)參數(shù)，通過(guò)這個(gè)參數(shù)可以判斷出手機(jī)是處在橫屏還是豎屏狀態(tài)。最近項(xiàng)目有電子合同方面的開(kāi)發(fā)，需要電子簽字，（用的jsignature插件，如果有空以后單獨(dú)寫(xiě)個(gè)使用心得）。在手機(jī)小屏幕上簽字，全屏橫屏才是最好的體驗(yàn)。用戶(hù)豎屏打開(kāi)頁(yè)面時(shí)要去簽字，提示用戶(hù)把手機(jī)橫過(guò)來(lái)，這樣體驗(yàn)太low了，程序員要考慮能用技術(shù)解決的就不要去勞煩用戶(hù)（免得用戶(hù)煩了回頭打電話(huà)咬你）。
先來(lái)幾個(gè)檢測(cè)屏幕方向的方法：
//判斷屏幕方向
if(window.orientation==90||window.orientation==-90){
alert("橫屏狀態(tài)！")
}
//監(jiān)聽(tīng)屏幕方向
window.onorientationchange = function(){
switch(window.orientation){
case -90:
case 90:
alert("橫屏:" + window.orientation);
case 0:
case 180:
alert("豎屏:" + window.orientation);
break;
}
}
<!--css媒介查詢(xún)判斷-->
@media (orientation: portrait) { } 橫屏
@media (orientation: landscape) { }豎屏 進(jìn)入網(wǎng)頁(yè)檢測(cè)是否橫屏狀態(tài)，不是就給canvas加樣式：
transform: rotate(90deg);最初想的是把jsignature的canvas畫(huà)布用css3transform橫過(guò)來(lái)就可以了，誰(shuí)想到，畫(huà)布橫是過(guò)來(lái)了，touch相關(guān)的手勢(shì)還是豎的（簽字啊，筆畫(huà)不跟手怎么簽）。如果是普通項(xiàng)目?jī)H僅是顯示的話(huà)，上面的方法已經(jīng)夠用了。
還好這個(gè)項(xiàng)目是網(wǎng)頁(yè)內(nèi)嵌app中，app有方法強(qiáng)制網(wǎng)頁(yè)橫屏，改了改頁(yè)面，交上去了。
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)html5模板網(wǎng)的支持。如果你想了解更多相關(guān)內(nèi)容請(qǐng)查看下面相關(guān)鏈接