1

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

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

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

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

4

3 回答 3

3

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

于 2014-05-19T22:21:53.630 回答
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 元素的宽度、高度、边距规则。

希望这可以帮助！

于 2012-11-29T05:21:04.160 回答
0

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

于 2012-12-04T23:51:28.807 回答