放大/缩放980px宽的网页，在平板电脑/小屏幕设备上占据全宽

Question

我为980px屏幕宽度分辨率设计了我的网页。在平板电脑/小屏幕设备上，虽然分辨率宽度超过980px但（显然）事情看起来要小得多。页面还没有占据整个宽度，因此页面有一些空间可以看起来更大。

我希望网页可以扩展/缩放以占用移动设备/平板电脑中的完整可用屏幕宽度。

Answer 1

您是否尝试在HTML顶部添加视口元标记？

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

这将使您的页面在移动设备上正常显示。

另外加入例如

.site { width: 100%; max-width: 980px }
@media all and (min-width: 981px)
{
  .site { max-width: 1200px; }
}

将.site更改为您拥有的任何内容。我的第二部分导致其他布局问题，而元标记将扩展一些没有布局问题。但是平板电脑/手机一起需要两者来正确显示你的CSS和HTML。

我不想把max-width：100％;在上面的CSS中你可能会遇到一些非常广泛的浏览器，它们会彻底破坏你的布局。最好找到您希望设计延伸到的最大值，例如1200像素。

Answer 2

尝试设置'max-width：100％;'对于屏幕大于980px的设备，您希望扩展到全屏的内容：

@media (min-width: 980px){
  .your-class{
    max-width:100%;
  }
}