如何确保一个网站填满整个视口？（台式机、手机、ipad 等）答案

【问题标题】：How to ensure that a website fills the entire viewport? (desktop, mobile, ipad, etc.)如何确保一个网站填满整个视口？（台式机、手机、ipad 等）
【发布时间】：2014-05-20 06:21:53
【问题描述】：

我们目前有一个不流畅/不灵活的网站（因为它不会根据视口大小改变其布局）。

当它显示在桌面上时，它会填满整个屏幕（并且居中对齐）。但是，当我们在 iPhone 或 iPad 等其他屏幕尺寸上查看它时，就会出现问题。网站布局看起来还不错，只是它没有填满整个屏幕或以某种方式被截断。

我尝试使用<meta name="viewport" content="width=[value]">，但它一次仅适用于一台设备（iPhone 或 iPad，但不能同时适用于两者）。

是否有一种代码可以缩放网站以适应正在使用的任何视口？

【问题讨论】：

你对Responsive Web Design做了多少研究？如果您正在研究，这里有一些框架：22 Responsive Framework
问题是，我们的网站还没有准备好响应式设计。这只是为了改善它在其他设备上的外观，尽管它没有响应。
您是否尝试过使用自动将宽度调整为设备宽度？

标签： css metadata responsive-design media-queries viewport

【解决方案1】：

谈到响应式设计时，有许多创造性的方法可以解决手头的问题。

您可以尝试使用百分比来使您的设计更具响应性。使用百分比是最大化用户视口的安全选择。

例如。

html, body { 
height: 100%; 
width: 100%; 
margin: 0; 
}

从那里您可以使用您的站点容器并进行更具体的操作。

HTML head 部分中的一些 JavaScript 也可以帮助您检测屏幕尺寸并相应地调整不同的 CSS 规则：

<!-- hide script from old browsers
//<![CDATA[

var windowWidth=screen.availWidth;
var windowHeight=screen.availHeight

function sniffer() {
var el=document.getElementById("body"); 
if(screen.width<=600) {
               el.style.width='100%';
               el.style.height= windowHeight;
               el.style.margin="auto";               
 } 
}
onload=sniffer;
//]]>
// end hiding script from old browsers -->

上面的 JavaScript 正在检查用户的屏幕是否小于或等于 600px；如果是这样，它会调整 body 元素的宽度、高度、边距规则。

希望这会有所帮助！

【讨论】：

【解决方案2】：

嗅探器功能与此元标记结合使用效果很好： <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

【讨论】：

【解决方案3】：

您是否尝试将初始比例设置为 1

【讨论】：