Viewport在桌面浏览器上调整大小

时间:2013-09-03 19:54:07

标签: css browser media-queries viewport

我有一个客户想要一个响应式网站,可以满足从1400px宽到960px宽的屏幕。任何小于此值的水平滚动条都可以出现。该网站必须保持与屏幕的左右边缘齐平。

起初我认为使用媒体查询,一些javascript和其他现代“响应”技术相当容易实现。我走了这条路,虽然这是我第一次使用全面的响应式网站,但这并不太难。我不得不做很多动态调整大小的图像,标题大小,文本大小等。大量的工作和测试,但值得。或者不是!! !!

现在我意识到移动safari有效地内置了这项技术。通过视口大小调整。这就是为什么在ipad上,960px和1200px宽的网站都会捕捉到浏览器窗口的边缘。

我的问题是'是否可以像在iOS上使用移动版Safari一样在桌面浏览器中模拟视口大小调整?'

1 个答案:

答案 0 :(得分:0)

种类,使用百分比或ems,例如

body{
    width: 100%; 
}
content{
    width: 60%;
    float: left;
}
sidebar{
    width: 35%;
    float: right;
}

然后您可以使用媒体查询来使用ems调整文本大小