我的客户要求我将当前用于桌面浏览器的网站的大小减少 30%。
有没有像移动浏览器上的视口元标记一样的 css 或元标记？
【问题讨论】：
zoom CSS 属性。此处描述，stackoverflow.com/a/1156526/368691。
你可以看cssscreenmedia type。
它是：
主要用于彩色计算机屏幕。
你可以这样使用它：
@media screen {
body { font-size: 70% }
}
还有一个handheld媒体类型，主要是：
适用于手持设备（通常是小屏幕、有限带宽）。
但是，您需要测试客户关注的不同设备和桌面，以确定使用这些媒体类型将如何影响用户体验。
【讨论】：
嗯...我知道这是一个老问题，但是有一个更好的方法来解决这个问题：使用<html> 标签上的 CSS scale() 转换函数来缩放里面的一切。看看这个 jsFiddle：http://jsfiddle.net/mike_marcacci/6fMnH/
魔法就在这里：
html {
transform: scale(.5);
-webkit-transform: scale(.5);
-moz-transform: scale(.5);
-ms-transform: scale(.5);
-o-transform: scale(.5);
width: 200%;
height: 200%;
margin: -50% -50%;
}
【讨论】：
颂歌是对的。
@media screen {
body { font-size: 70% }
}
但要让它真正发挥作用，你必须在任何地方都使用 ems 而不是 px。这适用于边距和填充以及所有元素的宽度和高度。
一个很好的方法是使用 SASS。只需创建您自己的 sass 函数即可将您的 px 测量值即时转换为 ems。这样的事情会做：
@function em($px, $context: 16, $basesize: 16) {
@return (($px/$basesize)/($context/16))+em;
}
然后像这样在你的 CSS 中使用：
div { font-size:em(12); width: em(200,12); }
所以，如果 body 字体大小设置为 100%，那么字体大小将相当于 12px，而 div 的宽度将是 200px 宽。
【讨论】：
这里是比例缩放和定位的代码，wnen使用“transform:scale”
CSS
html,body
{
width: 100%;
height: 100%;
margin:0;
padding:0;
}
html
{
position:absolute;
}
JS
var scale = 1;
$('html').css('transform','scale('+scale+')');
var windowWidth = $(window).width();
$('body').append(windowWidth);
$('body').append(' ' + windowWidth*scale );
//$('html').width(windowWidth*scale);
var width = (100*(1/scale));
var left = -(width*(1-scale))/2;
var height = (100*(1/scale));
var top = -(height*(1-scale))/2;
$('html').css('top', top+'%');
$('html').css('left', left+'%');
$('html').width(width+'%');
$('html').height(height+'%');
【讨论】：
您可以使用 JS 在桌面上启用元视口标签。首先，您应该从元标记派生设置（宽度）：
var viewportcontent = $( "#myviewport" ).attr('content');
var viewportcontents = viewportcontent.split(",");
//if it starts with 'width='
for (var i = 0; i < viewportcontents.length; i++) {
if(viewportcontents[i].lastIndexOf('width=', 0) === 0) {
var wspec = viewportcontents[i].substring(6);
}
}
那么你需要一点 JS 和 Mike 的解决方案来获得这个可行的解决方案：http://codepen.io/anon/pen/GqoeYJ。请注意，此示例强制宽度为 1200 像素，但 initial-scale: 0.7 可以以相同的方式实现。
【讨论】：