如何确保网站填满整个视口？ （桌面，移动，iPad等）

Question

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

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

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

是否有一个代码可以扩展网站以适应正在使用的视口？

Answer 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元素的宽度，高度，边距规则。

希望这有帮助！

Answer 2

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

Answer 3

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