13

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

是否有像移动浏览器上的视口元标记一样的 CSS 或元标记？

4

5 回答 5

13

嗯...我知道这是一个老问题，但有一个更好的方法来解决这个问题：使用标签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%;
}
于 2013-03-11T21:39:27.490 回答
3

您可以查看 cssscreen 媒体类型。

这是：

主要用于彩色计算机屏幕。

你可以这样使用它：

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

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

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

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

于 2011-01-24T21:50:39.537 回答
3

颂歌是对的。

@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 宽。

于 2014-01-10T23:11:38.783 回答
3

这里是比例缩放和定位的代码，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+'%');
于 2014-09-04T06:57:41.180 回答
0

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

于 2016-06-12T00:16:19.490 回答