Browser 桌面浏览器的视口元标记？

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

---

是否有css或meta标记可以像移动浏览器上的viewport meta标记那样执行此操作？

您可以查看css

屏幕

它是：

主要用于彩色计算机屏幕

您可以这样使用它：

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

还有一种
手持
媒体类型，主要包括：

适用于手持设备（通常为小屏幕、有限带宽）

但是，您需要测试客户关注的不同设备和台式机，以确定使用这些媒体类型将如何影响用户体验。
Hmmm。。。我知道这是一个老问题，但有一个更好的方法：使用
标记上的CSS
scale（）
transform函数来缩放内部的所有内容。查看这个JSFIDLE：

魔术就在这里：

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

因此，如果正文字体大小设置为100%，那么字体大小将相当于12px，div的宽度将是200px宽。
这里是比例缩放和定位的代码，wnen使用“transform:scale”

CSS

JS

您可以使用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);
  }
}

var viewportcontent=$（“#myviewport”）.attr（'content'）；
var viewportcontents=viewportcontent.split（“，”）；
//如果它以“width=”开头
对于（var i=0；i

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