在非移动浏览器中缩放视口

我的一位客户要求我们将侧边栏添加到固定宽度网站，这会使许多较小的笔记本电脑显示器的网站整体宽度变得过大。理想的解决方案是使用响应式布局，我们可能最终会在将来做某个事情，但现在我们正在寻找一个快速解决方案。在移动设备上，解决的办法是死的简单，因为我们可以利用视口设置：在非移动浏览器中缩放视口

<meta name="viewport" content="width=1280">

有没有办法迫使非移动浏览器缩放以类似的方式？我试过meta标签和CSS zoom属性，但到目前为止还没有在标准桌面浏览器上工作。有任何想法吗？

来源

2013-06-04 David Jones

http://stackoverflow.com/questions/4787564/viewport-meta-tag-for-desktop-browsers – ASattar

正如上面的链接提到的，你可以使用CSS scale()变换的<html>或<body>标签功能，缩放整个页面：

html { 
    transform: scale(.5); 
    -webkit-transform: scale(.5); 
    -moz-transform: scale(.5); 
    -ms-transform: scale(.5); 
    -o-transform: scale(.5); 
}

你”必须做一些技巧才能使页面在视口中正确对齐，但这是一般的想法。

来源

2013-06-04 14:46:59

根据视图宽度使用媒体查询调整内容大小（响应式布局）并不难。 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

样品：

@media (max-width: 600px) { 
    .facet_sidebar { 
    display: none; 
    } 
}

来源

2013-06-04 03:32:57 basarat

我知道媒体查询，正如我在我的文章中提到的，我们可能会最终建立一个完全响应的网站*最终*。现在，我认为AbdulS链接到的帖子中提到的CSS“scale（）”解决方案可能是一种快速修复的正确方法。 –

在非移动浏览器中缩放视口

回答

相关问题