如何确保网站填满整个视口?(台式机、移动设备、iPad 等)

Question

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

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

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

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

Answer 1

当涉及到响应式设计时，有许多创造性的方法来解决手头的问题。

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

例如。

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

从那里，您可以使用站点容器并更具体。

此外，HTML的头部部分中的一些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