网站在移动设备上拉伸和缩小

Question

我的网站有一个800px中间的容器，它的两侧都有自动边距，所以它保持在中心位置。

现在我想做的是在手机上没有左右边距的情况下显示页面，所以基本上我想让它在移动设备和平板电脑设备上延伸800px到设备宽度。

我尝试使用视口元标记，但它们似乎做不了多少：

<meta name="viewport" content="width=800, initial-scale=1">

我认为当设备具有较小的像素时，这只会将宽度保持为800，但是当设备具有较高的像素时，它将保持我的边距

我也尝试过：

<meta name="viewport" content="initial-scale=1, maximum-scale=1">

但它似乎表现得完全一样。

我正在使用c＃asp.net，我可以检测到我的设备是什么，并相应地更改视口，所以如果我使用台式机或笔记本电脑浏览器，我将使用不同的视口元。我无法弄清楚如何在移动设备上获得我想要的结果。

有什么建议吗？

Answer 1

根据宽度改变布局的Css媒体查询将有所帮助。

 @media screen and (max-width: 900px){
 #div_to_hide{display:none;}
  }

进一步阅读：CSS media queries