網站不縮減手機屏幕

我正在爲臺式機，平板電腦和手機屏幕製作網頁。爲此，我正在使用CSS媒體查詢。當我在桌面瀏覽器上測試我的網站時，當我縮放web bowser時，它會在css中提到的最大寬度爲740px時更改其佈局。但問題是，當我在手機上進行測試時，它並沒有改變其佈局來適應手機屏幕。網站不縮減手機屏幕

我使用12列布局系統並使用less css。請幫助我，爲什麼它不改變手機的佈局以適應手機屏幕。

這裏是我的CSS以下css來精確

html, body { 
height: 100%; 
//overflow: hidden; 
} 

body { 
min-width: 360px; 
background-color: #ffffff; 

#page { 
    width: 100%; 
    height: 100%; 
    overflow: auto; 
} 

.right { 
    position: relative; 
    right: 0; 
} 

// Extend column system (from defaults/layout.css) 
.row { 
    clear: both; 

    > .container { 
     max-width: 1024px; 
     margin: 0 auto; 
     padding: 0 2% 0 2%; 

     .container { 
      max-width: 100%; 
      padding-left: 0; 
      padding-right: 0; 

      &.one { 
       width: 8%; 
      } 
      &.two { 
       width: 16%; 
      } 
      &.three { 
       width: 25%; 
      } 
      &.four { 
       width: 33%; 
      } 
      &.five { 
       width: 41%; 
      } 
      &.six { 
       width: 50%; 
      } 
      &.seven { 
       width: 58%; 
      } 
      &.eight { 
       width: 66%; 
      } 
      &.nine { 
       width: 75%; 
      } 
      &.ten { 
       width: 83%; 
      } 
      &.eleven { 
       width: 91%; 
      } 
      &.twelve { 
       width: 100%; 
      } 

     } 
    } 
} 

} 



/*Collapse columns*/ 
@media only screen and (max-width: 740px) { 

.column, .column.one, .column.two, .column.three, .column.four, .column.five, .column.six, .column.eight, .column.nine, .column.ten, .column.eleven, .column.twelve, 
.column.close-right, .column.one.close-right, .column.two.close-right, .column.three.close-right, .column.four.close-right, .column.five.close-right, .column.six.close-right, .column.eight.close-right, .column.nine.close-right, .column.ten.close-right, .column.eleven.close-right, .column.twelve.close-right { 
    //width: auto; 
    //float: none; 
    //clear: both; 
    margin-right: 0; 
} 

.column.third { 
    display: none; 
} 

.column.second { 
    width: 77%; 
} 

.column.first { 
    //min-width: 180px; 
} 

}

來源

2012-08-26 2619

http://www.allenpike.com/2010/choosing-a-viewport-for-ipad-sites/

來源

2012-08-26 06:03:55 TheHe

嘗試添加以下內容到HTML頁面的頂部：

<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
</head>

這應該讓手機瀏覽器知道您的設備/瀏覽器大小的頁面，而不是僞造桌面計算機的屏幕大小（從而混淆了您的媒體查詢）。

來源

2012-08-26 06:06:27

網站不縮減手機屏幕

回答

相關問題