网站不缩减手机屏幕

我正在为台式机，平板电脑和手机屏幕制作网页。为此，我正在使用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

网站不缩减手机屏幕

回答

相关问题