如何确保网站填满整个视口? (桌面,移动,iPad等)

时间:2012-11-29 02:24:27

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

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

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

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

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

3 个答案:

答案 0 :(得分:3)

在响应式设计方面,有许多创造性的方法可以解决手头的问题。

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

例如

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

希望这有帮助!

答案 1 :(得分:3)

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

答案 2 :(得分:0)

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