在移動端中我們經(jīng)常碰到橫屏豎屏的問題，那么我們應該如何去判斷或者針對橫屏、豎屏來寫不同的代碼呢。

成都服務器托管，創(chuàng)新互聯(lián)提供包括服務器租用、成都服務器托管、帶寬租用、云主機、機柜租用、主機租用托管、CDN網(wǎng)站加速、域名與空間等業(yè)務的一體化完整服務。電話咨詢：13518219792

首先在head中加入如下代碼：

針對上述viewport標簽有如下說明

1)、content中的width指的是虛擬窗口的寬度。

2)、user-scalable=no就一定可以保證頁面不可以縮放嗎？NO，有些瀏覽器不吃這一套，還有一招就是minimum-scale=1.0, maximum-scale=1.0 最大與最小縮放比例都設(shè)為1.0就可以了。

3)、initial-scale=1.0 初始縮放比例受user-scalable控制嗎？不一定，有些瀏覽器會將user-scalable理解為用戶手動縮放，如果user-scalable=no，initial-scale將無法生效。

4)、手機頁面可以觸摸移動，但是如果有需要禁止此操作，就是頁面寬度等于屏幕寬度是頁面正好適應屏幕才可以保證頁面不能移動。

5)、如果頁面是經(jīng)過縮小適應屏幕寬度的，會出現(xiàn)一個問題，當文本框被激活（獲取焦點）時，頁面會放大至原來尺寸。

一：CSS判斷橫屏豎屏

寫在同一個CSS中

@media screen and (orientation: portrait) {
 /*豎屏 css*/
} 
@media screen and (orientation: landscape) {
 /*橫屏 css*/
}

分開寫在2個CSS中

豎屏

橫屏

二、JS判斷橫屏豎屏

//判斷手機橫豎屏狀態(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); 
//移動端的瀏覽器一般都支持window.orientation這個參數(shù)，通過這個參數(shù)可以判斷出手機是處在橫屏還是豎屏狀態(tài)。

最近項目有電子合同方面的開發(fā)，需要電子簽字，（用的jsignature插件，如果有空以后單獨寫個使用心得）。在手機小屏幕上簽字，全屏橫屏才是最好的體驗。用戶豎屏打開頁面時要去簽字，提示用戶把手機橫過來，這樣體驗太low了，程序員要考慮能用技術(shù)解決的就不要去勞煩用戶（免得用戶煩了回頭打電話咬你）。

先來幾個檢測屏幕方向的方法：

//判斷屏幕方向
if(window.orientation==90||window.orientation==-90){
  alert("橫屏狀態(tài)！")
}
//監(jiān)聽屏幕方向
window.onorientationchange = function(){ 
  switch(window.orientation){ 
    case -90: 
    case 90: 
      alert("橫屏:" + window.orientation);
    case 0: 
    case 180: 
       alert("豎屏:" + window.orientation);
    break; 
  } 
} 

@media (orientation: portrait) { } 橫屏
@media (orientation: landscape) { }豎屏 

進入網(wǎng)頁檢測是否橫屏狀態(tài)，不是就給canvas加樣式：

transform: rotate(90deg);

最初想的是把jsignature的canvas畫布用css3transform橫過來就可以了，誰想到，畫布橫是過來了，touch相關(guān)的手勢還是豎的（簽字啊，筆畫不跟手怎么簽）。如果是普通項目僅僅是顯示的話，上面的方法已經(jīng)夠用了。

還好這個項目是網(wǎng)頁內(nèi)嵌app中，app有方法強制網(wǎng)頁橫屏，改了改頁面，交上去了。

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對創(chuàng)新互聯(lián)的支持。如果你想了解更多相關(guān)內(nèi)容請查看下面相關(guān)鏈接