Question

我的客户要求我将桌面浏览器当前网站的大小减少30％。

是否有一个css或meta标签可以像移动浏览器上的视口元标记那样做？

Answer 1

嗯......我知道这是一个老问题，但有更好的方法可以解决这个问题：在scale()标签上使用CSS <html>转换功能来扩展内部的一切。看看这个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%;
}

Answer 2

颂歌是对的。

@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); }

因此，如果正文字体大小设置为100％，则字体大小将等于12px，div的宽度将为200px宽。

Answer 3

这里是比例尺和定位的代码，使用＆＃34; transform：scale＆＃34;

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+'%');

Answer 4

您可以查看css screen media type。

是：

主要用于彩色电脑屏幕。

你可以这样使用它：

@media screen {
  body { font-size: 70% }
}

还有handheld媒体类型，主要是：

适用于手持设备（通常是小屏幕，带宽有限）。

但是，您需要测试客户端关注的不同设备和桌面，以确定使用这些媒体类型将如何影响用户体验。

Answer 5

您可以使用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可以相同的方式实现。

桌面浏览器的Viewport元标记？

5 个答案: